[解決済み] 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で動作します) それとも、オブジェクトを反復するための構文が違うのでしょうか？

どのように解決するのですか？

ng1からの構文に対応したくないようです。

Miško Heveryによると( 参照 ):

マップはキーに順序を持たないので、反復は予測不可能です。 これはNG1ではサポートされていましたが、私たちはこれは間違いだと考えています。 NG2でサポートされる

予定では、mapToIterableパイプの

<div *ngFor"var item of map | mapToIterable">

したがって、オブジェクトを反復処理するためには、"pipe" を使用する必要があります。 現在のところ パイプ を実装しています。

回避策として、キーに反復処理を行う小さな例を示します。

コンポーネントです。

import {Component} from 'angular2/core';

@Component({
  selector: 'component',
  templateUrl: `
       <ul>
       <li *ngFor="#key of keys();">{{key}}:{{myDict[key]}}</li>
       </ul>
  `
})
export class Home {
  myDict : Dictionary;
  constructor() {
    this.myDict = {'key1':'value1','key2':'value2'};
  }

  keys() : Array<string> {
    return Object.keys(this.myDict);
  }
}

interface Dictionary {
    [ index: string ]: string
}