Angular2のngIfやngForで気をつけたいところ

スポンサーリンク

Angular2でAjaxで取得したデータを、テンプレートに反映するときにハマったのでメモ。

ビューにデータが反映されない

ngFor を使って配列のデータを出力していて、問題なく動作していました。

<div *ngFor="let item of items">{{ item | json }}</div>

次に ngIf を使って、データが存在する場合に出力するように実装しました。

<div ngIf="item">{{ item }}</div>

データが取得されても何も出力されない。 もしかして評価されてない?

ただの凡ミス

ngIf のアタマにアスタリスクがなかったという、なんとも恥ずかしいオチ。

<div *ngIf="item">{{ item }}</div>

Developer Toolで見てみると、ちゃんと認識されました。

<!--template bindings={}-->

はい、きましたー!

ngIfngFor などのディレクティブにはアスタリスクを忘れないようにしましょうね!!


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。