如何在角度 6 中绑定来自 HttpClient 的数据?

Question

我正在使用此方法获取数据：

家.服务.ts

getHomes(): Observable<HomeApi> {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded',
'token': `${this.global.token}`
})
};
return this.http.get<HomeApi>('url', httpOptions);
}

Home.component.ts

ngOnInit() {
this.service.getHomes().subscribe((res: HomeApi) => this.home = {
images: res['images']
});
}

首页.组件.html

<div *ngFor="let item of home.images">{{item.name}}</div>

现在item.name工作得很好，但在控制台中抛出此错误：

错误

类型错误：无法读取未定义的属性"图像">

这是示例

Answer 1

由于getHomes调用是异步的，因此 Angular 会在分配home.images之前尝试呈现其内容。发生这种情况后，home.images会在代码中分配并触发更改检测周期，最终使*ngFor成功运行。

处理此问题的一种方法是使用如下所示的内容：

<div *ngIf="home">
<div *ngFor="let item of home.images">{{item.name}}</div>
</div>

这只是确保在尝试处理*ngFor之前不会undefinedhome，这将解决您的控制台错误。

另一种选择是使用安全导航运算符：

Angular 安全导航运算符 (？.( 是一种流畅且方便的方法，用于防止属性路径中的空值和未定义值。

这就像向home添加?一样简单：

<div *ngFor="let item of home?.images">{{item.name}}</div>

Answer 2

您可能尚未初始化home。所以你第一次初始化 home 是在这里：

this.home = {
images: res['images']
}

在此之前home*ngFor对象中查找项目，该对象undefined，直到异步请求完成并初始化home。

尝试在组件顶部初始化 home： 例如home: any = {};

检查这篇文章，它展示了它可能正在发生的事情。