*ngFor 不显示来自 Angular 8 中 API 的数据

Question

我正在尝试从 API JSON 中显示姓名和年龄，但没有显示任何内容。我已经从控制台复制了下面的数据对象数组。我已经阅读了其他一些帖子并尝试了一些键/值解决方案，但无法解决。

BirthdayService 从 API 检索名人生日：

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root",
})
export class BirthdayService {
  constructor(private http: HttpClient) {}

  public getBirthdays() {
    return this.http.get(
      `https://cors-anywhere.herokuapp.com/https://celebritybucks.com/developers/birthdays/JSON`
    );
  }
}

component.ts：

import { Component, OnInit, Injectable, Pipe } from "@angular/core";
import { BirthdayService } from "../services/birthday.service";

@Pipe({ name: "values" })
@Component({
  selector: "app-api-birthday",
  templateUrl: "./api-birthday.component.html",
  styleUrls: ["./api-birthday.component.css"],
})
@Injectable()
export class ApiBirthdayComponent implements OnInit {
  articles;

  constructor(private apiService: BirthdayService) {}

  async ngOnInit() {
    this.apiService.getBirthdays().subscribe((data: any[]) => {
      console.log(data);
      this.articles = data["articles"];
    });
  }
}

HTML：

  <ul>
  <div *ngFor="let article of articles">
    <h2>{{ article.name }}</h2>

    <p>
      {{ article.age }}
    </p>
  </div>
</ul>

控制台 - console.log() ：

{Birthdays: Array(19)}
Birthdays: Array(19)
0: {celebId: "3714", name: "Jane Lynch", dob: "1960-07-14", havePic: "1", twitter: "", …}
1: {celebId: "3540", name: "Jackie Earle Haley", dob: "1961-07-14", havePic: "1", twitter: "", …}
2: {celebId: "5727", name: "Matthew Fox", dob: "1966-07-14", havePic: "1", twitter: "", …}
3: {celebId: "7534", name: "Scott Porter", dob: "1979-07-14", havePic: "0", twitter: "", …}
4: {celebId: "1753", name: "Dale Robertson", dob: "1923-07-14", havePic: "0", twitter: "", …}
5: {celebId: "2167", name: "Donald Meek", dob: "1878-07-14", havePic: "0", twitter: "", …}
6: {celebId: "2195", name: "Doris Nolan", dob: "1916-07-14", havePic: "0", twitter: "", …}
7: {celebId: "2957", name: "George Tobias", dob: "1901-07-14", havePic: "0", twitter: "", …}
8: {celebId: "3195", name: "Harry Dean Stanton", dob: "1926-07-14", havePic: "1", twitter: "", …}
9: {celebId: "3821", name: "Jean Dixon", dob: "1896-07-14", havePic: "0", twitter: "", …}
10: {celebId: "5153", name: "Lino Ventura", dob: "1919-07-14", havePic: "0", twitter: "", …}
11: {celebId: "6189", name: "Nancy Olson", dob: "1928-07-14", havePic: "0", twitter: "", …}
12: {celebId: "6324", name: "Nina Siemaszko", dob: "1970-07-14", havePic: "0", twitter: "", …}
13: {celebId: "6767", name: "Polly Bergen", dob: "1930-07-14", havePic: "0", twitter: "", …}
14: {celebId: "7476", name: "Sara Canning", dob: "1987-07-14", havePic: "0", twitter: "", …}
15: {celebId: "7740", name: "Stan Shaw", dob: "1952-07-14", havePic: "0", twitter: "", …}
16: {celebId: "1", name: "Val Avery", dob: "1924-07-14", havePic: "0", twitter: "", …}
17: {celebId: "93", name: "Vincent Pastore", dob: "1946-07-14", havePic: "0", twitter: "", …}
18: {celebId: "8506", name: "Zita Johann", dob: "1904-07-14", havePic: "0", twitter: "", …}
length: 19
__proto__: Array(0)
__proto__: Object

Answer 1

为什么你有 3 个装饰器，@Pipe、@Component 和 @Injectable？你正在创建一个组件，你应该只有@Component。

我用你的代码（和服务的模拟）做了一个堆栈闪电战，虽然这是 Angular 10，而不是 8，但同时拥有所有三个装饰器会引发错误。删除@Pipe 使其工作，但您也应该删除@Injectable。

请参见此处的示例： https://stackblitz.com/edit/angular-ivy-4cbdfs?file=src%2Fapp%2Fapp.component.ts

如果你在 stackblitz 中取消注释 @Pipe，Angular 会出错。

另外，就像用户 Chris 评论的那样，您来自 getBirthdays 的数据类型不正确，如果它有一个属性 articles 是一个数组，那么整个对象就不是一个数组。

这是 stackblitz 的完整组件，以防它消失

import { Component, VERSION, Injectable, Pipe } from '@angular/core';
import { Observable , of} from 'rxjs';

// uncommenting the @Pipe will break the component, this is angular 10 though, so the error might be silent in v8
// @Pipe({name: 'values'})
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
// @Injectable() // Why do you have this here?
export class AppComponent  {

  articles;

  async ngOnInit() {
    // this was typed wrong, its not an array if it has a property 'articles'
    // I also didn't want to create a new service so I just mocked it 
    this.getBirthdays().subscribe((data: any) => {
      console.log(data);
      this.articles = data["articles"];
    });
  }

  // mock of your service call
  getBirthdays(): Observable<any> {
    return of(
      {articles: 
      [
        {name : 'test 1', age: 10},
        {name : 'test 2', age: 8},
        {name : 'test 3', age: 15},
        {name : 'test 4', age: 22},
      ]}
    )
  }
}