Question

我正在使用这种方法来获取数据：

home.service.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']
    });
}

home.component.html

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

现在item.name可以很好地工作，但是在控制台中会引发以下错误：

错误TypeError：无法读取未定义的属性“图像”

这里是Sample

Answer 1

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

处理此问题的一种方法是使用类似以下的内容：

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

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

另一种选择是使用safe navigation operator：

Angular安全导航运算符（？。）是一种流畅而便捷的方法，可防止属性路径中的null和undefined值。

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

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

Answer 2

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

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

直到*ngFor在home对象的undefined对象中寻找项，直到异步请求完成并初始化home。

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

Check this piece, which demonstrates what it is probably happening.

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

2 个答案: