无法迭代服务中创建的数组 - 异步问题？

Question

我在我的服务中创建了一个这样的项目数组：

items: IItem[] = [];
...
LoadItems() {
        this.GetItems().subscribe((res) => {
            // console.log(res);
            if (res.status == 200 && res.body.data != undefined) {
                var data = res.body.data;
                this.items.push({
                        Id: data[i].id,
                        IsBlue: data[i].isBlue, //this is a bool
                    });
                }    
            }
            // console.log(this.items.length);
        });
    }

这在我的 app.component.ts 文件中的 ngOnInIt 中被调用。然后我想像 item.component.ts 中那样迭代这个 Items 数组：

GetBlueItems(items: IItem[]) {
    var blueitems: IItem[] = [];
    console.log(items); //this returns the array correctly

    for (let i = 0; i < items.length; i++) {
        if (item.isBlue) {
            blueitems.push(item);  
        }
    }

但它只是从不迭代数组。当我执行

console.log(items.length)

时，它返回 0，这让我很困惑，因为

console.log(items)

显示数组不为空。

我尝试在订阅块中打印数组的长度，它确实正确返回了长度，所以我认为这是同步问题？但我还是不明白为什么控制台会毫无问题地打印这个：

0: {Id: 1, IsBlue: false }
1: {Id: 2, IsBlue: true }
length: 2

我也尝试过对数组进行 forEach 循环，但它也不会迭代：

items.forEach(item => {
    if (item.isBlue) {
        blueitems.push(item);  
    }
});

如果这确实是问题的话，我希望能够在订阅块之外使用这个数组。我不需要不断更新。

Answer 1

您的第一个代码块缺少加载数据的 forEach 循环

    items: IItem[] = [];
    ...
    LoadItems() {
        this.GetItems().subscribe((res) => {
            // console.log(res);
            if (res.status == 200 && res.body.data != undefined) {
                var data = res.body.data;
                data.forEach((item: any, i: number) => {
                    this.items.push({
                        Id: item[i].id,
                        IsBlue: item[i].isBlue, //this is a bool
                    });
                });
                }    
            }
            // console.log(this.items.length);
            this.getBlueItems(this.items);
        });
    }

然后使用 forEach 循环调用此函数。

GetBlueItems(items: IItem[]) {
    var blueitems: IItem[] = [];
    console.log(items); //this returns the array correctly

    items.forEach(item => {
        if (item.isBlue) {
            blueitems.push(item);  
        }
    });