Angular ngOnInit中循环push生成数组为空，求问题原因

原因 #

this.itemService.getItems(this.id)是异步HTTP请求，subscribe里的next回调只会在后端返回数据后才执行。而你写的遍历items生成colorArray的代码，是在subscribe之后立刻同步运行的——这时候this.items = res还没执行，items还是初始的空数组，自然推不出任何内容，console.log就会显示空数组。

至于HTML里*ngFor能正常渲染，是因为Angular的变更检测机制：当subscribe回调执行、items被赋值后，Angular会检测到数组变化，自动更新视图。

解决方法 #

把处理colorArray的代码放到subscribe的next回调内部，确保在items被赋值后再执行：

id: string = '';
items: Item[] = [];

ngOnInit(): void {
    this.id = this.activatedRoute.snapshot.params['id'];
    this.itemService.getItems(this.id).subscribe({
      next: (res) => {
        this.items = res;
        // 在这里处理colorArray
        let colorArray:string[] = [];
        for (let item of this.items) {
          colorArray.push(item.color)
        }
        console.log(colorArray); // 此时能正常输出数据
      }
    })
}

如果习惯用async/await的写法，可以把Observable转为Promise，让代码逻辑更线性：

async ngOnInit(): Promise<void> {
    this.id = this.activatedRoute.snapshot.params['id'];
    // 将Observable转为Promise
    const res = await this.itemService.getItems(this.id).toPromise();
    this.items = res;
    let colorArray:string[] = [];
    for (let item of this.items) {
      colorArray.push(item.color)
    }
    console.log(colorArray);
}

还可以用数组的map方法简化遍历逻辑：

// 在next回调内
const colorArray = this.items.map(item => item.color);

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