Angular异步问题：无法遍历服务中创建的数组

问题场景 #

我在服务中创建IItem类型数组，通过异步请求填充数据，该方法在app.component.ts的ngOnInit中调用：

items: IItem[] = [];
...
LoadItems() {
        this.GetItems().subscribe((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, //布尔类型
                    });
                }    
            }
        });
    }

随后在item.component.ts中尝试遍历数组筛选蓝色项：

GetBlueItems(items: IItem[]) {
    var blueitems: IItem[] = [];
    console.log(items); //控制台能显示数组内容
    console.log(items.length); //返回0

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

    //forEach同样无法执行
    items.forEach(item => {
        if (item.isBlue) {
            blueitems.push(item);  
        }
    });
}

异常现象：console.log(items)显示数组有2个元素，但items.length始终为0，循环无法执行。仅在subscribe回调内打印数组长度是正确的，推测是异步同步问题，希望能在subscribe外部使用该数组用于HTML展示、购物车及结算等（无需实时更新）。

核心原因 #

这是异步操作的时序问题：当调用GetBlueItems时，LoadItems中的HTTP请求还未完成，数组items还是初始空数组（length=0）。而浏览器控制台打印的数组是引用类型的延迟快照——控制台会在请求完成后更新显示数组的最新内容，但此时循环已经执行完毕。

解决方法 #

方法1：等数据加载完成后再传递处理（推荐） #

修改LoadItems返回Observable，在数据加载完成后再通知子组件执行逻辑，同时修正原代码中未遍历data数组的错误：

// app.component.ts
LoadItems(): Observable<IItem[]> {
    return this.GetItems().pipe(
        map(res => {
            if (res.status == 200 && res.body.data != undefined) {
                // 遍历data数组，批量转换为IItem类型
                this.items = res.body.data.map(item => ({
                    Id: item.id,
                    IsBlue: item.isBlue
                }));
                return this.items;
            }
            return [];
        })
    );
}

ngOnInit() {
    this.LoadItems().subscribe(items => {
        // 数据加载完成后，调用子组件的筛选方法
        this.itemComponent.GetBlueItems(items);
    });
}

子组件中用更简洁的filter处理筛选：

// item.component.ts
GetBlueItems(items: IItem[]) {
    const blueitems = items.filter(item => item.IsBlue);
    console.log(blueitems.length); //此时会正确返回1
}

方法2：用AsyncPipe处理HTML展示 #

如果主要用于HTML渲染，可直接用Angular的async pipe自动处理异步数据流：

// app.component.ts
items$: Observable<IItem[]>;

ngOnInit() {
    this.items$ = this.LoadItems();
}

LoadItems(): Observable<IItem[]> {
    return this.GetItems().pipe(
        map(res => {
            if (res.status == 200 && res.body.data != undefined) {
                return res.body.data.map(item => ({
                    Id: item.id,
                    IsBlue: item.isBlue
                }));
            }
            return [];
        })
    );
}

在父组件HTML中传递异步数据：

<app-item [items]="items$ | async"></app-item>

子组件通过@Input()接收并在数据变化时处理：

// item.component.ts
@Input() items: IItem[];

ngOnChanges(changes: SimpleChanges) {
    if (changes.items && changes.items.currentValue) {
        const blueitems = this.items.filter(item => item.IsBlue);
        // 执行展示或购物车逻辑
    }
}

方法3：手动添加加载状态标记 #

在父组件中标记数据加载完成状态，子组件等待状态就绪后再处理：

// app.component.ts
items: IItem[] = [];
isLoaded = false;

LoadItems() {
    this.GetItems().subscribe(res => {
        if (res.status == 200 && res.body.data != undefined) {
            this.items = res.body.data.map(item => ({
                Id: item.id,
                IsBlue: item.isBlue
            }));
            this.isLoaded = true;
        }
    });
}

父组件HTML传递状态：

<app-item [items]="items" [isLoaded]="isLoaded"></app-item>

子组件监听状态变化：

// item.component.ts
@Input() items: IItem[];
@Input() isLoaded: boolean;

ngOnChanges(changes: SimpleChanges) {
    if (changes.isLoaded && this.isLoaded) {
        const blueitems = this.items.filter(item => item.IsBlue);
        // 执行后续逻辑
    }
}

内容的提问来源于stack exchange，提问作者necrophade