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

home.component.html

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

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

ERROR TypeError: 无法读取未定义的属性“images”

这里是示例

- Mohammad Jalili

---

看起来你收到了一个格式不正确或未定义的响应。你收到了什么？ - firegloves

你能执行 console.log(res) 并检查返回了什么吗？ - Aman B

响应正常，因为它正在使用ngFor打印数据。 - Mohammad Jalili

在 {} 中添加 if 语句以避免未定义的值。例如，this.home = { if (res['images']) images: res['images'] } - Khaled

你好，能否告诉我们您如何实例化home，以便我们可以为您提供进一步的帮助？另外，请检查该字段是否不是私有的。 - Ankit Kumar Singh

Answer 1

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

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

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

这只是确保在处理*ngFor之前home不是undefined，从而解决了您的控制台错误。另一个选项是使用安全导航操作符:

Angular的安全导航操作符(?.)是一种流畅且方便的方式，可以防止属性路径中的null和undefined值。

这就像在home中添加?一样简单。

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

- Kirk Larkin

---

如果您按照我的建议进行修改，在我的回答中，您的示例可以无错误地运行。您试过了吗？ - Kirk Larkin

在我的实际项目中不起作用，但在 StackBlitz 上它可以工作。控制台现在没有错误，但没有显示任何东西。 - Mohammad Jalili

Answer 2

您可能尚未初始化home。因此，您第一次初始化home是在这里：

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

直到异步请求完成并初始化home对象之前，*ngFor在home对象中查找项目，而这个对象是未定义的。 尝试在组件顶部初始化home： 例如：home：any = {}; 请查看此示例，了解可能发生的情况。

- korteee

---

我正在将接口用作home变量的类型，但仍会抛出未定义错误。 - Mohammad Jalili

通过使用接口，您只是定义了家庭的类型 - 您仍然没有初始化它。您需要在组件顶部执行类似于 home: HomeApi = { sliders: [] } 的操作。 - korteee