技術

[Angular]ng-forでオブジェクトを回してkeyとvalueを取得する。

投稿日:

AngularのディレクティブであるngForで以下のように、オブジェクトを回そうとすると、エラーになります。

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Object.keysを使った方がいいかなと思いましたが、
Angularがkeyvalueというデフォルトpipeを用意してくれています。

*ngFor=”example error of examples | keyvalue”としたあとで、以下のような感じでそれぞれ取得できます。

{{example.key}}
{{example.value}}

バージョン6.1.0からみたいなので、それ以降は使えるはずです。
最近バージョン8も出ましたし、Angularはどんどん便利になっているようです。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

関連記事

[Angular] has no exported member ‘XXXLoginComponent’.

どうも中田です Angularでコンポーネント名を階層構造にあった名前にしようと …

Sequel Proで本番DBに接続できない!

こんにちは。たなかです。 最近はDIY記事ばかりでしたので、久々にエラー解消記事 …

no image

VivaldiのWEBパネルに登録して便利だったサイトを紹介する

こんばんは VivaldiのWEBパネルはとても便利です。 今回はWEBパネルに …

[Rails] モデルが初期化されてないとな(not initialized)

どうも中田です Railsで、modelの initialize に処理を追加す …

[正規表現]半角英数字&記号

どうも中田です。 今更ですが、正規表現の話。 正規表現でこんなパターンがほしい的 …