Angular 7 HttpClient Get Request неопределенный ответ

Question

GET Запрос от API неопределенная ошибка

Данные отображаются, но консоль показывает неопределенную ошибку в строке 46: ОШИБКА TypeError: Невозможно прочитать свойство 'detaljne' из неопределенного а также ОШИБКА Контекст PostComponent.html: 46

JSON вложен в JSON-сервер

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

Вы пытаетесь получить доступ к свойству post в *ngFor, но не проверяете, существует ли сам post.Чтобы исправить это, вы можете использовать *ngIf

Использование *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>, который является просто «оберткой», которая не создаст фактический элементна 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"
    }
  ]
};

By:

post = null;

и вы не увидите ошибок при использовании этого метода