在 ngAfterViewinit 上推送数组未定义
pushed Array undefined on ngAfterViewinit
我已经在 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
}
您在 ngOnInit 中有异步调用未及时完成。
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>
我已经在 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
}
您在 ngOnInit 中有异步调用未及时完成。
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>