Question

我试图弄清楚如何在JSON响应中访问对象的内容。格式如下：

https://api.coindesk.com/v1/bpi/historical/close.json

{"bpi":{"2017-10-03":4320.09,"2017-10-04":4225.9238,"2017-10-05":4322.755,"2017-10-06":4370.245,"2017-10-07":4437.0338,"2017-10-08":4596.9625,"2017-10-09":4772.975,"2017-10-10":4754.6988,"2017-10-11":4830.7663,"2017-10-12":5439.1338,"2017-10-13":5640.1275,"2017-10-14":5809.6938,"2017-10-15":5697.3917,"2017-10-16":5754.2213,"2017-10-17":5595.235,"2017-10-18":5572.1988,"2017-10-19":5699.5838,"2017-10-20":5984.0863,"2017-10-21":6013.2288,"2017-10-22":5984.9563,"2017-10-23":5895.2988,"2017-10-24":5518.85,"2017-10-25":5733.9038,"2017-10-26":5888.145,"2017-10-27":5767.68,"2017-10-28":5732.825,"2017-10-29":6140.5313,"2017-10-30":6121.8,"2017-10-31":6447.6675,"2017-11-01":6750.1725,"2017-11-02":7030.0025},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index. BPI value data returned as USD.","time":{"updated":"Nov 3, 2017 00:03:00 UTC","updatedISO":"2017-11-03T00:03:00+00:00"}}

如果我想显示每个键及其各自的内容（特别是来自bpi的日期和时间组合），我将如何在Angular 2中进行此操作？我尝试过使用Object.keys，但它只返回bpi，time，并在没有内容的情况下进行更新。

Answer 1

对于Angular 2：

@jitender回答

// Component Side :
objectKeys = Object.keys;
data = {"bpi":{"2017-10-03":4320.09,"2017-10-04":4225.9238,"2017-10-05":4322.755,"2017-10-06":4370.245,"2017-10-07":4437.0338,"2017-10-08":4596.9625,"2017-10-09":4772.975,"2017-10-10":4754.6988,"2017-10-11":4830.7663,"2017-10-12":5439.1338,"2017-10-13":5640.1275,"2017-10-14":5809.6938,"2017-10-15":5697.3917,"2017-10-16":5754.2213,"2017-10-17":5595.235,"2017-10-18":5572.1988,"2017-10-19":5699.5838,"2017-10-20":5984.0863,"2017-10-21":6013.2288,"2017-10-22":5984.9563,"2017-10-23":5895.2988,"2017-10-24":5518.85,"2017-10-25":5733.9038,"2017-10-26":5888.145,"2017-10-27":5767.68,"2017-10-28":5732.825,"2017-10-29":6140.5313,"2017-10-30":6121.8,"2017-10-31":6447.6675,"2017-11-01":6750.1725,"2017-11-02":7030.0025},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index. BPI value data returned as USD.","time":{"updated":"Nov 3, 2017 00:03:00 UTC","updatedISO":"2017-11-03T00:03:00+00:00"}}

// Template Side :
<ul>
  <li *ngFor='#key of objectKeys(data.bpi)'>
   Key: {{key}}, value: {{data.bpi[key]}}
  </li>
</ul>

对于Angular 2+（4/5）：

较新版本的角色已弃用

#key，因此您必须使用let key代替#key

// Component Side :
objectKeys = Object.keys;
data = {"bpi":{"2017-10-03":4320.09,"2017-10-04":4225.9238,"2017-10-05":4322.755,"2017-10-06":4370.245,"2017-10-07":4437.0338,"2017-10-08":4596.9625,"2017-10-09":4772.975,"2017-10-10":4754.6988,"2017-10-11":4830.7663,"2017-10-12":5439.1338,"2017-10-13":5640.1275,"2017-10-14":5809.6938,"2017-10-15":5697.3917,"2017-10-16":5754.2213,"2017-10-17":5595.235,"2017-10-18":5572.1988,"2017-10-19":5699.5838,"2017-10-20":5984.0863,"2017-10-21":6013.2288,"2017-10-22":5984.9563,"2017-10-23":5895.2988,"2017-10-24":5518.85,"2017-10-25":5733.9038,"2017-10-26":5888.145,"2017-10-27":5767.68,"2017-10-28":5732.825,"2017-10-29":6140.5313,"2017-10-30":6121.8,"2017-10-31":6447.6675,"2017-11-01":6750.1725,"2017-11-02":7030.0025},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index. BPI value data returned as USD.","time":{"updated":"Nov 3, 2017 00:03:00 UTC","updatedISO":"2017-11-03T00:03:00+00:00"}}

// Template Side :
<ul>
  <li *ngFor='let key of objectKeys(data.bpi)'>
   Key: {{key}}, value: {{data.bpi[key]}}
  </li>
</ul>

以下是工作演示的链接：

https://stackblitz.com/edit/angular-json-key-loop

Answer 2

您可以在模板中访问Object.keys并在*ngFor中使用它。

objectKeys = Object.keys;
  data = {"bpi":{"2017-10-03":4320.09,"2017-10-04":4225.9238,"2017-10-05":4322.755,"2017-10-06":4370.245,"2017-10-07":4437.0338,"2017-10-08":4596.9625,"2017-10-09":4772.975,"2017-10-10":4754.6988,"2017-10-11":4830.7663,"2017-10-12":5439.1338,"2017-10-13":5640.1275,"2017-10-14":5809.6938,"2017-10-15":5697.3917,"2017-10-16":5754.2213,"2017-10-17":5595.235,"2017-10-18":5572.1988,"2017-10-19":5699.5838,"2017-10-20":5984.0863,"2017-10-21":6013.2288,"2017-10-22":5984.9563,"2017-10-23":5895.2988,"2017-10-24":5518.85,"2017-10-25":5733.9038,"2017-10-26":5888.145,"2017-10-27":5767.68,"2017-10-28":5732.825,"2017-10-29":6140.5313,"2017-10-30":6121.8,"2017-10-31":6447.6675,"2017-11-01":6750.1725,"2017-11-02":7030.0025},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index. BPI value data returned as USD.","time":{"updated":"Nov 3, 2017 00:03:00 UTC","updatedISO":"2017-11-03T00:03:00+00:00"}}

<ul>
  <li *ngFor='let key of objectKeys(data.bpi)'>
   Key: {{key}}, value: {{data.bpi[key]}}
  </li>
</ul>

Working demo

Angular 2访问对象内的整个嵌套对象

2 个答案: