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

【问题标题】：Angular 2 accessing an entire nested object within an objectAngular 2 访问对象内的整个嵌套对象
【发布时间】：2017-11-03 04:38:29
【问题描述】：

我试图弄清楚如何在 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、时间和更新而没有它们的内容。

【问题讨论】：

标签： json angular object nested

【解决方案1】：

您可以在模板中访问 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

【讨论】：

谢谢你回答了我的问题。如果我想在同一个组件中使用 data.bpi[key] 的内容来填充一个数组，你知道我会怎么做吗？（假设“数据”是相同的内容，但来自实际的 JSON 响应，而不仅仅是复制/粘贴到组件中）

【解决方案2】：

对于 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 在较新版本的 angular 中已弃用，因此您必须使用 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

【讨论】：

谢谢你回答了我的问题。如果我想在同一个组件中使用 data.bpi[key] 的内容来填充一个数组，你知道我会怎么做吗？（假设“数据”是相同的内容，但来自实际的 JSON 响应，而不仅仅是复制/粘贴到组件中）