Angular中ngOnInit内动态生成的数组无法获取长度问题求助

嘿，这个问题我见得挺多的，本质是异步操作的时序问题在搞鬼！你调用的getChampions方法大概率是一个异步操作（比如发起HTTP请求去后端拿数据），当你在ngOnInit里调用它之后立刻打印this.champs.length，此时异步请求还没完成，数组自然是空的，所以才会输出0。

先把你的代码贴出来方便大家看：

@Component({ 
  selector: 'rise-our-champions', 
  templateUrl: './our-champions.component.html', 
  styleUrls: ['./our-champions.component.css'] 
}) 
export class OurChampionsComponent implements OnInit { 
  champs: any = []; 
  ngOnInit() { 
    this.getChampions(0, 12, 'created_at', 'desc', this.campaignId); 
    console.log(this.champs); 
    console.log(this.champs.length); // 此处显示为0
  }
}

下面给你几个靠谱的解决方案：

方案1：用Promise的then()回调等待异步完成 #

如果getChampions返回的是Promise，直接在它的then回调里处理数据和打印就行——这时候异步操作已经完成，数组已经被赋值了：

ngOnInit() {
  this.getChampions(0, 12, 'created_at', 'desc', this.campaignId)
    .then(() => {
      console.log(this.champs);
      console.log(this.champs.length); // 这里就能拿到正确的长度啦
    });
}

方案2：用async/await让代码更清爽 #

如果你喜欢看起来像同步代码的写法，可以给ngOnInit加上async关键字，然后用await等待getChampions完成：

async ngOnInit() {
  await this.getChampions(0, 12, 'created_at', 'desc', this.campaignId);
  console.log(this.champs);
  console.log(this.champs.length); // 此时数据已经加载完成
}

方案3：确保getChampions内部正确处理异步逻辑 #

如果getChampions是你自己写的方法，一定要保证它在异步操作（比如HTTP请求）完成后再给this.champs赋值。举个HTTP请求的例子：

getChampions(start: number, limit: number, sortBy: string, sortDir: string, campaignId: string): Promise<any> {
  return this.http.get(`你的API地址?start=${start}&limit=${limit}&sortBy=${sortBy}&sortDir=${sortDir}&campaignId=${campaignId}`)
    .pipe(
      tap(data => {
        this.champs = data; // 等请求成功拿到数据后再赋值
      })
    )
    .toPromise();
}

额外小技巧：用异步管道简化模板渲染 #

如果你的数据是从Observable来的，完全可以不用手动订阅和赋值，直接在模板里用async管道，Angular会帮你处理所有异步逻辑：

// 组件里定义Observable类型的变量
champs$: Observable<any[]>;

ngOnInit() {
  this.champs$ = this.getChampions(0, 12, 'created_at', 'desc', this.campaignId);
}

// 让getChampions返回Observable
getChampions(start: number, limit: number, sortBy: string, sortDir: string, campaignId: string): Observable<any[]> {
  return this.http.get(`你的API地址?参数...`);
}

模板里这么用：

<div *ngFor="let champ of champs$ | async">
  <!-- 这里直接渲染champ的内容就行 -->
</div>

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