Angular 6 API JSON ngFor不显示

Question

我正在第一次使用Angular 6开发一个项目，并且正在创建一个应用程序，该应用程序从在线URL获取JSON数据，并列出HTML页面上的每个条目。 每个条目都有一个变量键值，并与变量数组配对。 问题是，尽管未显示任何错误，但* ngFor语句未显示任何条目，但{{jsonData | json}}显示数据已成功返回。 这是我的代码。

api-retrieval-service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpResponse} from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { CoinListing } from './coinListing';

@Injectable({
  providedIn: 'root'
})
export class ApiRetrievalService {
  constructor(private _http: HttpClient) { }

  coinList() {
    return this._http.get('https://min-api.cryptocompare.com/data/all/coinlist').pipe(catchError(this.errorHandler));
  }

  errorHandler(error: HttpErrorResponse) {
     return throwError(error);
  }
} 

coinlist.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiRetrievalService } from '../api-retrieval.service';
import { CoinListing } from '../coinListing';

@Component({
  selector: 'app-coinlist',
  templateUrl: './coinlist.component.html',
  styles: []
})
export class CoinlistComponent implements OnInit {
  title = 'Coin Listing';
  public _jsonData:CoinListing[] = [];
  constructor(private _apiRetrieval: ApiRetrievalService) { }
  ngOnInit() {
    this._apiRetrieval.coinList()
      .subscribe(
        result =>  {
          this._jsonData = result.Data;
          console.log('Success', result.Data);
        },
        error => this.errorMsg = error.statusText
     );
  }
}

coinListing.ts

export interface CoinListing {
  [key:string]: {
    Algorithm: string;
    BuiltOn: string;
    CoinName: string;
    FullName: string;
    FullyPremined: string;
    Id: string;
    ImageUrl: string;
    IsTrading: string;
    Name: string;
    PreMinedValue: string;
    ProofType: string;
    SmartContractAddress: string;
    SortOrder: string;
    Sponsored: string;
    Symbol: string;
    TotalCoinSupply: string;
    TotalCoinsFreeFloat: string;
    Url: string;
  }
};

coinlist.component.html

<div style="text-align:center">
  <h1>
    {{ title }}
  </h1>
</div>
<br/>
<p *ngFor="let coin of _jsonData">
 Found {{ coin }}
</p>

有谁知道通过* ngFor阻止CoinListings的显示吗？ 还是给定结构，如何在HTML页面中显示每个CoinListing的变量？

Answer 1

如果我正确理解这一点，“每个条目都有一个变量键值，并与变量数组配对”，那么钱币就是一个对象或数组。 如果是这样的话

Found {{ coin }} 

不会返回值。 您需要从硬币内部调用变量。 例如，如果“ title”是硬币内的钥匙，那么您可以

Found {{ coin.title }}

Answer 2

您需要绑定属性或使用json管道 {{_jsonData | json}} {{_jsonData | json}}之所以有效，是因为您要告诉绑定使用json管道赋予该结构

要了解有关JSON管道的更多信息： https : //angular.io/api/common/JsonPipe

你可以这样做：

<p *ngFor="let coin of _jsonData">
  Found {{ coin | json }}
<p>

或绑定要显示的每个属性

 <p *ngFor="let coin of _jsonData">
      Found:
      {{  coin.Algorithm }}
      {{  coin.BuiltOn }}
      .
      .
      .
      {{  coin.Url }}
 <p>

更新：基于对象的结构

<div *ngFor="let coin of objectKeys(_jsonData)">
    {{_jsonData[coin] | json}}
</div>

在您的ts文件中：

objectKeys(obj) {
    return Object.keys(obj);
}

Answer 3

您需要使用如下所示的属性

<p *ngFor="let coin of _jsonData">
 Found {{ coin.Title }}
</p>