显示字典角度分量

Question

我有这个杰森：

{
    "BTC_BCN": {
        "id": 7,
        "last": "0.00000021",
        "lowestAsk": "0.00000021",
        "highestBid": "0.00000020",
        "percentChange": "0.05000000",
        "baseVolume": "11.09583267",
        "quoteVolume": "55302150.21663477",
        "isFrozen": "0",
        "high24hr": "0.00000021",
        "low24hr": "0.00000019"
    },
    "BTC_BTS": {
        "id": 14,
        "last": "0.00001507",
        "lowestAsk": "0.00001507",
        "highestBid": "0.00001505",
        "percentChange": "-0.00462351",
        "baseVolume": "16.45124387",
        "quoteVolume": "1091869.46387249",
        "isFrozen": "0",
        "high24hr": "0.00001525",
        "low24hr": "0.00001496"
    },
    "xxx_yyy": {
     },
    ........
}

该界面：

  export interface RootObject {
  marketName: paircoin;
}

export interface paircoin {
  id: number;
  last: string;
  lowestAsk: string;
  highestBid: string;
  percentChange: string;
  baseVolume: string;
  quoteVolume: string;
  isFrozen: string;
  high24hr: string;
  low24hr: string;
}

HTML组件：

<h1>Poloniex Coins</h1>

<p *ngIf="!(coinsPoloniex && coinsPoloniex.length)">
  There aren't coins to show you!!
</p>

<table class="table" *ngIf="coinsPoloniex && coinsPoloniex.length">
  <thead>
    <tr>
      <th>MarketName</th>
      <th>Id</th>
      <th>Last</th>
      <th>LowestAsk</th>
      <th>HighestBid</th>
      <th>PercentChange</th>
      <th>BaseVolume</th>
      <th>QuoteVolume</th>
      <th>IsFrozen</th>
      <th>High24hr</th>
      <th>Low24hr</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let iterateCoinP of coinsPoloniex">
      <td>{{iterateCoinP.marketName}}</td>
      <td>{{iterateCoinP.id}}</td>
      <td>{{iterateCoinP.last}}</td>
      <td>{{iterateCoinP.lowestAsk}}</td>
      <td>{{iterateCoinP.highestBid}}</td>
      <td>{{iterateCoinP.percentChange}}</td>
      <td>{{iterateCoinP.baseVolume}}</td>
      <td>{{iterateCoinP.quoteVolume}}</td>
      <td>{{iterateCoinP.isFrozen}}</td>
      <td>{{iterateCoinP.high24hr}}</td>
      <td>{{iterateCoinP.low24hr}}</td>
    </tr>
  </tbody>
</table>

我如何迭代这个Json？ 当我执行项目时，组件将显示以下内容：没有硬币可以显示给您！ （“ coinsPoloniex”为空）

。

我正在学习Angular，有很多我不理解的事情。 拜托，有人帮我！！

问候。

Answer 1

这是因为您在ngFor中使用的名称是：

尝试更换

<tr *ngFor="let iterateCoinP of coins-poloniex">

对于：

<tr *ngFor="let iterateCoinP of coinsPoloniex">

检查以下示例： https : //next.plnkr.co/edit/pwcrdbas5RV1LEvc?open=lib%2Fapp.ts&deferRun=1

Answer 2

您需要使用键值管道或Object.keys（）。 因为coinsPoloniex返回对象的对象。

<ng-container *ngFor="let key of Object.keys(coinsPoloniex); let i=index;">
   <tr *ngFor="let fields of Object.keys(coinsPoloniex[key]; let j=index;">
      <td *ngIf="!j">{{key}}</td>
      <td>{{coinsPoloniex[key][fields]}}</td>
   </tr>
</ng-container