Angularで連想配列をngForで回したい

以前カスタム構造ディレクティブを作ってハッシュの各要素をngForのように回すという方法をとったことがありました

いつの間にか公式でkeyValuePipeというのが追加されていました(v6から)

Exampleを見れば使い方がわかると思うのですがスマートに実現できますね

    this.hash = {
      hoge: 'foo',
      fuga: 'bar',
      piyo: 'baz'
    };

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

ということで今後はハッシュに対しても繰り返し要素を表示するみたいなことが簡単にできるようになります

既存の6以前のAngularプロジェクトは上げてしまいたいところですね