オブジェクトプロパティをngForで角をつけてループする方法

Question

これは私が職場で見つけた興味深い問題です。

まだわからない場合は、私はこのリストの値は、バックエンドから、代わりに、古き良きいくつかの理由で来る、あなたはリストのためのマークアップを表示したい角度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. 

が、ない体ではないではありませんそれには時間があります。あなたは子供を心配しないで、私は私たちを持っています。完璧な世界では

Answer 1

ソリューション

世界は、常に完璧ではないので、あなたは、オブジェクトの配列を得るでしょう。あなたがしたいのは、それらのオブジェクトをすべて配列内に格納することです。ここでは、簡単に古い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]); 
} 

次に、あなたが最初の場所でトラフをiterareしようとしていたクラスのプロパティにgoodResponseを割り当てることができます。

これはすべての人々です。

Answer 2

より良い解決策は、次のようなパイプを使用することです。この1：あなたのテンプレートで次に

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> 

Answer 3

これが安全であるならば、私は知らないが、これらについて私はパイプソリューションを好きではないので、私は通常使用し、簡単な例：

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

とコントローラで：

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

これは非常に頻繁なケースですが、Angular.js 1のような標準的な実装がない理由はわかりません。x