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

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

主页.component.html

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);
}

现在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>

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

另一种选择是使用安全导航操作符：

Angular 安全导航操作符 (?.) 是防止属性路径中出现 null 和 undefined 值的一种流畅而方便的方法。

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

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