Angular 7 HttpClient获取请求未定义响应

从API获取请求未定义错误

显示数据，但控制台在第46行显示未定义的错误： 错误类型错误：无法读取未定义的属性“detaljne” 和 错误上下文PostComponent.html:46

JSON嵌套在JSON服务器中

TS

HTML

{{detaljne.name}

{{detaljne.value}}

post.model.ts

import { Detaljne } from "./detaljne.model";
import { Deserializable } from "./deserializable.model";

export class Post implements Deserializable {
  public id: number;
  public detaljne: Detaljne[];

  deserialize(input: any): this {
    Object.assign(this, input);
    this.detaljne = input.detaljne.map(detaljne =>
      new Detaljne().deserialize(detaljne)
    );
    return this;
  }
}

JSON

---

您正试图访问

*ngFor

中的

post

属性，但尚未检查

post

本身是否存在。 要解决此问题，您可以使用

*ngIf

在定义post之前，使用

*ngIf=“post”

不会呈现HTML元素

<ng-container *ngIf="post">
  <div *ngFor="let detaljne of post.detaljne" class="row-info">
      <p>{{ detaljne.name }}</p>
      <p>{{ detaljne.value }}</p>
  </div>
</ng-container>

{{detaljne.name}

{{detaljne.value}}

注意：您不能在同一个元素上使用

*ngFor

和

*ngIf

，因此您可以使用

，它只是一个“包装器”，不会在DOM上创建实际的元素

---

另外，还有安全导航操作符

？

，它与执行

post！==无效的product.detaljne:null

。这两个选项都是有效的，只需选择最适合的一个：）

这样做就足够了，您不需要添加额外的

*ngIf层：

<div *ngFor = "let detaljne of post?.fetchData">
  <p>{{ detaljne.name }}</p>
  <p>{{ detaljne.value }}</p>
</div>

作者：

您不会看到此方法有任何错误，原因是获取响应需要一些时间。因此，使用承诺延迟加载数据。

this._customerService.getCustomers().subscribe(data => this.customers = data);

在承诺下使用此功能。
尝试在ngFor中使用
post？.detaljne
，查看它是否有效。我已经尝试过但没有帮助尝试提供演示来重现错误。而不是添加额外的
*ngIf
层。应使用
安全导航操作员（？）解决此问题。
错误消失！谢谢@jofoulk！你能告诉我一些关于这个错误的信息以便将来知道吗？更新答案来解释发生了什么：）啊哈，现在对我来说更清楚了…再次感谢你@Jojofoulk@Jojofoulk：不需要添加额外的*ngIf层，请参阅我的答案。
<div *ngFor = "let detaljne of post?.fetchData">
  <p>{{ detaljne.name }}</p>
  <p>{{ detaljne.value }}</p>
</div>

post = {
  "id": 1,
  "fetchData": [
    {
      "name": "Marka",
      "value": "Audi"
    },
    {
      "name": "Model",
      "value": "A6"
    }
  ]
};

post = null;

this._customerService.getCustomers().subscribe(data => this.customers = data);