web-dev-qa-db-ja.com

ngFor in Angularでオブジェクトのプロパティをループする方法

これは仕事で見つけた興味深い問題に関する投稿です。

まだ知らないなら私は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.

バックエンドで修正してオブジェクトの配列を取得することもできますが、そのための時間はありません。子供を心配しないでください、私たちは持っています。

javascriptangulartypescriptecmascript-6
17
Jaime Rios

Angular 6.1では、オブジェクトプロパティを反復できるKeyValuePipeが導入されました。

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

ドキュメント： https://angular.io/api/common/KeyValuePipe

39
danday74

これが安全かどうかはわかりませんが、これらの単純なケースではパイプソリューションが好きではないので、通常は以下を使用します。

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

そしてコントローラーで：

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

これは非常によくあるケースです。Angular.js1.xのような標準的な実装がない理由がわかりません。

14
m__

より良い解決策は、次のようなパイプを使用することです。

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>
10
Matsura

解決策

完璧な世界では、世界は常に完璧ではないため、オブジェクトの配列を取得します。あなたがしたいことは、配列内のすべてのオブジェクトを保存することです。これは、単純で古い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を割り当てることができます。

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

1
Jaime Rios
    <div *ngFor="let item of donation_list | keyvalue">
        <div class="donation-box">
             <Label class="donation-label">Date : {{item.value.PaymentDate}}</Label>
             <Label class="donation-label">Time : {{item.value.PaymentTime}}</Label>

        </div>
   </div>

オブジェクト内にさらにプロパティがある場合は、次のように使用できます。

1
ChamodyaDias