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

Question

GET 请求来自 API 未定义错误

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

JSON 嵌套在 JSON-Server

TS

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Post } from "../post.model";
import { ServerService } from "../server.service";

@Component({
  selector: "post",
  templateUrl: "./post.component.html",
  styleUrls: ["./post.component.css"]
})
export class PostComponent implements OnInit {
  post: Post[];

  constructor(
    private route: ActivatedRoute,
    private serverService: ServerService
  ) {}

  ngOnInit(): void {
    this.getPost();
  }

  getPost(): void {
    const id = +this.route.snapshot.paramMap.get("id");
    this.serverService.getPosts(id).subscribe(post => (this.post = post));
  }
}

HTML

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

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

{
      "id": 1,
      "detaljne": [
        {
          "name": "Marka",
          "value": "Audi"
        },
        {
          "name": "Model",
          "value": "A6"
        }
      ]
    },

Answer 1

您正试图在您的 *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>

注意：您不能在同一个元素上使用 *ngFor 和 *ngIf，所以您使用 <ng-container> 这只是一个 'wrapper'不会在 DOM.

上创建实际元素

另外还有安全导航运算符 ?，它与 post!== null ? product.detaljne: null 略有不同。两个选项都有效，请选择最适合的那个:)

Answer 2

这样做，应该足够了，你不需要添加额外的层 *ngIf:

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

查看此工作演示：

https://stackblitz.com/edit/ngfor-example-7ipt7m?file=app/app.component.ts

结果：

只需替换：

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

作者：

post = null;

并且您不会看到此方法有任何错误

Answer 3

原因是需要一些时间才能得到响应。所以使用 promises 来延迟直到加载数据。

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

根据承诺使用它。

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

Angular 7 HttpClient Get Request undefined response

rest

angular

angular-httpclient