Jump to the content

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

Angular2

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×