Angular 8 Наблюдаемый получить данные в data.all

Question

Я изучаю Angular 8 служб и наблюдаемых с этим API (https://cat-fact.herokuapp.com/facts). Проблема в том, что я не могу получить доступ к данным в «Все». Я использую интерфейс с ответом http.

Если я попытался вернуть data.all, визуальный код выдаст мне предупреждение " Свойство 'all' не существует для типа 'IFact []'.".

В представлении, если я попытался получить доступ к data.all у меня есть эта ошибка:

ОШИБКА TypeError:" _co.fact is undefined "

Интерфейс:

export interface IFact {
    _id: string,
    text: string,
    type: string,
    user: {
        _id: string,
        name: {
            first: string,
            last: string,
        }
    },
    upvotes: number,
    userUpVoted: ''
};

Сервис:

@Injectable({
  providedIn: 'root'
})
export class FactService {

  private _url = 'http://localhost:4200/facts';

  constructor(private http: HttpClient) { }

  getFacts(): Observable<IFact[]>{
    return this.http.get<IFact[]>(this._url)
  }
}

Компонент:

export class FactComponent implements OnInit {

  public facts = [];

  constructor(private _factService: FactService) { }

  ngOnInit() {

    this._factService.getFacts()
      .subscribe(
        data => {
          this.facts = data;
          console.log(this.facts);
        },
        err => console.log(err)
      )
  }
}

HTML

<table>
    <td ng-repeat="fact of facts">
        <tr>{{fact._id}}</tr>
    </td>
</table>

Answer 1

Это может быть вызвано тем, что компонент отображает представление до того, как ваш список фактов будет возвращен из API. Попробуйте это:

<table *ngIf="facts && facts.length">
  <td ng-repeat="fact of facts">
    <tr>{{fact._id}}</tr>
  </td>
</table>

РЕДАКТИРОВАТЬ

Как указано в комментариях, *ngFor имеет больше смысла для Angular 2 +

<table *ngIf="facts && facts.length">
  <td *ngFor="let fact of facts">
    <tr>{{fact._id}}</tr>
  </td>
</table>

Answer 2

Эй, в вашем коде несколько проблем. Я обновил этот код и создал stackbliz также там, где вы проверяете.

Компонент

import { Component } from "@angular/core";
import { FactService } from "./app.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  public facts = [];

  constructor(private _factService: FactService) {}

  ngOnInit() {
    this._factService.getFacts().subscribe(
      data => {
        this.facts = data.all;
        console.log(this.facts);
      },
      err => console.log(err)
    );
  }
}

Сервис

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { IFact } from "./type";

@Injectable({
  providedIn: "root"
})
export class FactService {
  private _url = "https://api.myjson.com/bins/82946";

  constructor(private http: HttpClient) {}

  getFacts(): Observable<IFact> {
    return this.http.get<IFact>(this._url);
  }
}

html

<table>
    <tr *ngFor="let fact of facts">
        <td>{{fact._id}}</td>
    </tr>
</table>

тип

export interface IFact {
  all: Fact[];
}
export interface Fact {
  _id: string;
  text: string;
  type: string;
  user: {
    _id: string;
    name: {
      first: string;
      last: string;
    };
  };
  upvotes: number;
  userUpVoted: "";
}

Stackbliz Link https://stackblitz.com/edit/angular-ubnmuw