☰

Angularでオブジェクトを反復処理する [重複] 質問する

tag-icon • tag-icon angular
Angularでオブジェクトを反復処理する [重複] 質問する

Angular 2 Alpha 28 でいくつかのことを実行しようとしているのですが、辞書と に問題が発生していますngFor。

TypeScript には次のようなインターフェースがあります。

interface Dictionary {
    [index: string]: string
}

JavaScript では、これは次のようなデータを持つオブジェクトに変換されます。

myDict={'key1':'value1','key2':'value2'}

これを繰り返し実行したいので、これを試しました:

<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>

しかし、以下のいずれも機能せず、役に立ちませんでした。

<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>

いずれの場合も、次Unexpected tokenのようなエラーが発生します。Cannot find 'iterableDiff' pipe supporting object

ここで何が欠けているのでしょうか? これはもう不可能なのでしょうか? (最初の構文は Angular 1.x では機能します) または、オブジェクトを反復処理するための構文が異なりますか?

ベストアンサー1

Angular 6.1.0+ 回答

組み込みのkeyvalue-パイプこのような：

<div *ngFor="let item of myObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

または次のようになります:

<div *ngFor="let item of myObject | keyvalue:mySortingFunction">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

mySortingFunctionファイル内の場所は.ts、例えば次のようになります:

mySortingFunction = (a, b) => {
  return a.key > b.key ? -1 : 1;
}

スタックブリッツ:https://stackblitz.com/edit/angular-iterate-key-value

Angular パイプはどのテンプレートでもすぐに使用できるため、これをどのモジュールにも登録する必要はありません。

また、Javascript マップ。

おすすめ記事