在 DefaultIterableDiffer.diff 处只允许数组和可迭代对象

Question

我正在尝试从 api 获取数据以显示在 Angular 的 component.html 上。但是我被这个问题困住了

所以它应该显示 API 的总死亡人数，即“238569”。

错误错误：尝试比较“238569”时出错。只允许数组和可迭代对象

component.html

<li *ngFor="let deaths of tDeaths"
  [value]="deaths">
  {{ deaths }}
</li>

component.ts

import { Component, OnInit } from '@angular/core';
import { CoronaService } from '../corona.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-covid',
  templateUrl: './covid.component.html',
  styleUrls: ['./covid.component.css']
})
export class CovidComponent implements OnInit {
  public tDeaths:any = [];
  constructor(private coronaService : CoronaService) {}

  ngOnInit(): void {
      this.coronaService.getJSON().subscribe(data => {
        console.log(data);

        this.tDeaths = data.Global.TotalDeaths;
      });
  }  
}

service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';



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

  constructor(private http: HttpClient) {
    this.getJSON().subscribe(data => {
    });
}

public getJSON(): Observable<any> {
    return this.http.get("https://api.covid19api.com/summary");
}
}

Answer 1

您似乎在尝试迭代一个数字。您需要为 *ngFor 提供一个数组（可能将一个对象映射到一个带有 Object.keys/Object.values 的数组）或者如果输出值不应该是第一个数组则不要使用 ngFor地点。

Answer 2

您需要在 OnInit 中将数据推送到您的 tDeaths。由于您将其声明为数组。

  ngOnInit(): void {
      this.coronaService.getJSON().subscribe(data => {
        console.log(data);

        this.tDeaths.push(data.Global.TotalDeaths);
        return this.tDeaths
      });
  }

在 DefaultIterableDiffer.diff 处只允许数组和可迭代对象

Only arrays and iterables are allowed at DefaultIterableDiffer.diff

javascript

typescript

angular-cli

angular