在 ngAfterViewinit 上推送未定义的数组

Posted 2023-03-13

【中文标题】在 ngAfterViewinit 上推送未定义的数组

【英文标题】：pushed Array undefined on ngAfterViewinit

【发布时间】：2020-02-04 19:31:07

【问题描述】：

我在 Angular ngOnInit 上的数组上推送了一些值，并且数据在 ngAfterViewInit 上变得不可用，它将特定值显示为未定义

randomNUMber = [];

 ngOnInit() 

this.apiServices.getLineChart(this.coinId).subscribe(resc => 

          for (let i =0 ; i < 8 ; i++) 
            this.randomNUMber.push(Number(resc.data[i].price));
          

          console.log('price1', this.randomNUMber[2]); //it Works
        );



ngAfterViewInit() 
console.log('price1', this.randomNUMber);  //this Wors too
console.log('price1', this.randomNUMber[2]); // But this doesnt work 

【问题讨论】：

ngAfterViewInit 事件处理程序可能在 getLineChart 回调之前调用。

那么console.log('price1', this.randomNUMber); 是如何工作的。它获取所有值

这是因为控制台中显示的数组内容是在点击展开箭头时被求值的。尝试console.log('price1', JSON.stringify(this.randomNUMber))); 获取实时内容。您还可以尝试使用 this stackblitz，这表明了这种行为。

你想在 ngAfterViewInit 中做什么？

【参考方案1】：

ngOnInit() 不等待异步调用，因此您可以这样做：

...
this.myObs$: Observable<any>;

ngOnInit() 
   this.myObs$ = this.apiServices.getLineChart(this.coinId).pipe(map(resc => 
      let randomNUMber: number[] = [];
      for (let i =0 ; i < 8 ; i++) 
         randomNUMber.push(Number(resc.data[i].price));
      

      return randomNUMber;
    ));
 

如果您使用 ngAfterViewInit，我想您需要在模板上正确显示此数据。 所以需要使用异步管道订阅this.myObs$

<div *ngIf="(myObs$ | async) as randomNUMber">
   <p *ngFor="let number of randomNUMber">
     number 
   </p>
</div>

见Async pipe

【参考方案2】：

您在 ngOnInit 中有异步调用未及时完成。