如何使用ngFor在Angular中循環使用對象屬性

這是一篇關於我在工作中發現的有趣問題。如何使用ngFor在Angular中循環使用對象屬性

如果你還不知道它。我說的是角2+

所以你要顯示的標記的名單的問題，對於這個列表來自於後端，由於某種原因，而不是一個很好的舊值您收到類似這樣的對象數組。

{ 
    "car" : 
    { 
     "color" : "red", 
     "model" : "2013" 
    }, 
    "motorcycle": 
    { 
     "color" : "red", 
     "model" : "2016" 
    }, 
    "bicycle": 
    { 
     "color" : "red", 
     "model" : "2011" 
    } 
}

然後您嘗試使用* ngFor但野生出現錯誤消息：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

讓您獲得對象的數組您可能會修復它在後端，但也不是沒有身體爲此獲得時間。你不擔心孩子，我有我們。

來源

2017-08-22 Jaime Rios

解決方案

在一個完美的世界裏，你會得到一個對象數組，因爲世界上沒有永遠，完美。你想要做的是將所有這些對象存儲在一個數組中。這是一個簡單的舊的JavaScript過度簡化的解決方案。

第1步。獲取所有對象鍵。使用Object.keys。此方法返回給定對象自己可枚舉屬性的數組。

第2步。創建一個空數組。這是所有屬性都將生存的地方，因爲你的新的ngFor循環將指向這個數組，所以我們必須把它們全部抓住。

第3步。迭代拋出所有鍵，並將每個鍵都推入您創建的數組中。

下面是代碼中的樣子。

// Evil response in a variable. Here are all my vehicles. 
let evilResponse = { 
    "car" : 
    { 
     "color" : "red", 
     "model" : "2013" 
    }, 
    "motorcycle": 
    { 
     "color" : "red", 
     "model" : "2016" 
    }, 
    "bicycle": 
    { 
     "color" : "red", 
     "model" : "2011" 
    } 
} 
// Step 1. Get all the object keys. 
let evilResponseProps = Object.keys(evilResponse); 
// Step 2. Create an empty array. 
let goodResponse = []; 
// Step 3. Iterate throw all keys. 
for (prop of evilResponseProps) { 
    goodResponse.push(evilResponseProps[prop]); 
}

然後，您可以將goodResponse分配給您嘗試迭代低谷的類屬性。

這就是所有人。

來源

2017-08-22 13:32:57

一個更好的解決辦法是使用一個管道像這樣：

import { Pipe, PipeTransform } from '@angular/core'; 

/** 
* Convert Object to array of keys. 
*/ 
@Pipe({ 
    name: 'appProperties' 
}) 
export class PropertiesPipe implements PipeTransform { 

    transform(value: {}): string[] { 

    if (!value) { 
     return []; 
    } 

    return Object.keys(value); 
    } 
}

然後在你的模板：

<div *ngFor="let property of response | appProperties"> 
    <div *ngFor="let item of response[property]"> 
     {{item.something}} 
    </div> 
</div>

來源

2017-08-22 13:51:51 Matsura

你是對的，如果項目需要它在多個實例中，你的解決方案似乎更具可擴展性。 –

我不知道這是否是安全的，但對於這些簡單的情況下，我不喜歡管解決方案，所以我通常使用：

<div *ngFor="let k of objectKeys(yourObject)"> 
    {{yourObject[k].color}} 
</div>

，並在控制器：

objectKeys(obj) { 
    return Object.keys(obj); 
}

這是一個相當常見的情況，我不明白爲什麼沒有像Angular.js 1這樣的標準實現。x

來源

2017-08-24 12:43:23

如何使用ngFor在Angular中循環使用對象屬性

回答

相關問題