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

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 などのディレクティブにはアスタリスクを忘れないようにしましょうね!!

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。Udemyでプログラミング解説の講師や、ドローンを使った映像制作も行っています。

プロフィール