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のプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.