使用 ngFor 遍历“更复杂”的对象答案

【问题标题】：Use ngFor to iterate through a "more complex" object使用 ngFor 遍历“更复杂”的对象
【发布时间】：2016-07-26 10:17:59
【问题描述】：

基本上，我将数据作为对象存储在 JSON 文件中，格式如下：

{
    "name": {
        "source1": ____,
        "source2": ____,
        "source3": ____
    },
    "xcoord": {
        "source1": ____,
        "source2": ____,
        "source3": ____
    }
}

我使用this strategy（转到“执行多个并发 http 请求”）通过服务将 JSON 数据加载到我的组件中。

现在我需要一个ngFor 语句来遍历“name”键，返回每个源的名称值。我想在<select> 中显示所有这些名称值。我还希望每个<option> 的value 成为数据对象的“名称”键中的“source1”、“source2”、“source3”。

我不太确定我应该怎么做，而且我对 Typescript/Angular2 有点不熟悉。做我想做的事的最佳策略是什么？也许我应该为ngFor 语句创建一个管道，以将我的对象作为数组读取？或者也许我应该创建一个新类来重新格式化数据并只返回一个名称数组？

哪种方法更好，不幸的是我不知道如何做。我将不胜感激！

【问题讨论】：

标签： javascript arrays json typescript angular

【解决方案1】：

我需要一个 ngFor 语句来遍历“name”键，返回每个源的名称值

要遍历name，您需要使用jsonObject.name 访问它，这将返回一个对象。

Object.keys 将返回其属性的数组。

forEach 用于遍历数组

var selectOptions = '';
var _getName = jsonObject.name; // will return value of name object
Object.keys(_getName).forEach(function(item){
 selectOptions +='<option value ="'+_getName[item]+'">'+(_getName[item])+'</option>';})
$("#someSelectId").append(selectOptions)

JSFIDDLE

【讨论】：