data.all中的角度8可观测数据获取

Question

我正在使用这个api (https://cat-fact.herokuapp.com/facts)学习角8服务和可观察性。我遇到的问题是我无法访问“所有”中的数据。我使用一个带有http响应的接口。

如果我尝试返回data.all可视代码，请给我一个警告：“IFact[]类型上不存在属性'all‘”。

在视图中，如果我试图访问data.all，就会出现以下错误：

ERROR TypeError："_co.fact未定义“

接口：

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

嘿，你的代码中有很多问题。我更新了这段代码，并在您检查的地方创建了堆栈。

组件

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链接https://stackblitz.com/edit/angular-ubnmuw

Answer 2

这可能是在从API返回事实列表之前呈现视图的组件造成的。试试这个：

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

编辑

正如注释中所指出的，*ngFor对于角2+更有意义。

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

Answer 3

日安！下面是示例代码：

Component:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { NgZone} from '@angular/core';
import {HttpServiceService} from './../http-service.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {

  constructor(
     private http: HttpServiceService,
     private zone: NgZone
    ) { }
  brews: object;
  ngOnInit(): void {
      this.http.getPeople().subscribe(data => {
      this.brews = data;
      alert(JSON.stringify(this.brews));  // Should diplay joson format
      console.log(this.brews);
      });
  }
}

Service:
import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';

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

  constructor() { }
  getPeople(): Observable<any>{
    const peopleArray = [{
      firstName: 'Al',
      lastName: 'Moje',
      age: 63
    }];
    return of(peopleArray);
 }
}