【Angular4】属性の指定方法による値の解釈の違い
Viewで、タグの属性にデータバインディングする際の、Interporationとプロパティバインディングの値の解釈の違いについて紹介します。
<!-- hoge = false; -->
<!-- Stringとして扱われる: 'false' -->
<div attr="{{hoge}}"></div>
<!-- Booleanとして扱われる: false -->
<div [attr]="hoge"></div>
{{値}}の形式で表現するInterporationは、式の展開を行い、結果を文字列として扱います。
先程の例では、attr="{{hoge}}"が文字列の'false'として扱われ、truthyな値として解釈されてしまいます。
また、[属性名]の形式で表現するプロパティバインディングはその値のままバインドしてくれます。
式として適用すべき箇所にはプロパティバインディングを使うようにして、Interporationは文字表示にだけ使うようにするのがベターです。
私は、Ionic3でアプリ制作をしていて、カスタムコンポーネントを自作しているときに、Interporationでバインディングして「なんでngIfがうまく動かないんだろう」と悩んでしましました。
初めてカスタムコンポーネント作成に挑戦した時だったので、カスタムコンポーネントの作り方の問題だとばかり思ってしまい、呼び出し側のInterporationが原因だと気付くのに時間が掛かってしまいました……。
