处理来自 API 的数据时"Cannot read properties of undefined" Angular11

Question

我想从API中获取数据，但是当我想将数据放入对象(模型)并将其记录在控制台中时，它会返回未定义。

同样的事情，当我使用它在我的HTML与数据绑定，那里它然后也未定义。但是当我在subscribe函数完成时将其记录到控制台时它确实会记录到控制台

我的ts文件:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { BannerStat } from 'src/app/models/banner.model';
import { Home, Banner } from 'src/app/models/home.model';
import { HomeService } from 'src/app/services/home.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class HomeComponent implements OnInit {
home: Home;
bannerList : Banner[];

constructor(private homeService: HomeService) {}
ngOnInit(): void {
this.handleData();
// this gives back undefined banner
// when I use it as data in my html its also undefined
console.log(this.bannerList);
console.log(this.topMessage);

}
handleData(): void {
this.homeService.getHomeObject<Home[]>().subscribe({
next: (response) => {
this.home = response[0];
},
error: (err: any) => {
console.log(err);
},
complete: () => {
this.bannerList = this.home.bannersBanners;
// these both log the correct data
console.log(this.home.topMessage);
console.log(this.bannerList)
}
}
);
}
}

对象和列表"没有在ngOnInit或页面加载时初始化。我还试着把"handleData()";函数在构造函数中，但运气不好。

我已经检查了多个帖子并浏览了网络，但我不知道我需要改变的地方…

Answer 1

这是由于handleData()中的异步进程。

问题是ngOnInit调用handleData，但不等待答案，并通过控制台记录对象和列表继续(js的工作方式是这样的，这是正常的)。那么答案就来自api…但是对于ngOnInit中的console.log来说太晚了。

你可以用。topromise()来扭转这种情况，并在ngOnInit()中等待，如:

await handleData().toPromise().then(response => {console.log(response);}).

Answer 2

您需要像这样定义home变量home: Home = new Home();，然后分配来自API的数据。bannerList:: Banner[] = new Banner[]

也一样