使用ngFor遍歷“更復雜”的對象

Question

基本上，我將數據存儲為JSON文件中的對象，格式如下：

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

我使用這種策略 （轉到“執行多個並發的HTTP請求”）通過服務將JSON數據加載到我的組件中。

現在，我需要一個ngFor語句來迭代“名稱”鍵，返回每個源的名稱值。 我想在<select>顯示所有這些名稱值。 我還希望每個<option>的value都是數據對象的“名稱”鍵中的“ source1”，“ source2”，“ source3”。

我不太確定該怎么做，我對Typescript / Angular2不太熟悉。 做我想做的最好的策略是什么？ 也許我應該為ngFor語句創建管道，以將我的對象讀取為數組？ 還是我應該制作一個新類來重新格式化數據並只返回名稱數組？

哪種方法更好，但不幸的是，我不知道該怎么做。 我將不勝感激！

Answer 1

我需要一個ngFor語句來迭代“名稱”鍵，返回每個源的名稱值

要遍歷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