[解決済み] Angular 2で条件属性を追加する方法は？

質問

要素属性に条件付きで追加するにはどうすればよいですか。 checked をチェックボックスで使用できますか？

以前のバージョンの Angular では NgAttr であり、私が思うに NgChecked これらはすべて、私が求めている機能を提供しているように見えます。 しかし、これらの属性はAngular 2には存在しないようで、この機能を提供する他の方法はないようです。

どうすればいいですか？

null が削除されます。

[attr.checked]="value ? '' : null"

または

[attr.checked]="value ? 'checked' : null"

ヒント

属性とプロパティの比較

このバインディングを追加したHTML要素が、バインディングで使用されている名前のプロパティを持っていない場合( checked を持つ同じ要素にAngularコンポーネントやディレクティブが適用されていない場合。 @Input() checked; であれば [xxx]="..." は使用できません。

参照 HTMLのプロパティと属性の違いは何ですか？

そのようなプロパティがない場合、何にバインドするか

代替案として [style.xxx]="..." , [attr.xxx]="..." , [class.xxx]="..." は、何を達成しようとするかによります。

なぜなら <input> を持つだけです。 checked 属性はありませんが checked プロパティ [attr.checked]="..." は、この具体的なケースに適した方法です。

属性は文字列値しか扱えない

また、よくある落とし穴として [attr.xxx]="..." バインディングの値 ( ... ) は 常に を文字列化する。プロパティのみと @Input() は、boolean, number, object, ...といった他の値の型を受け取ることができます。

最も のプロパティと属性は接続されており、同じ名前を持っています。

プロパティと属性の接続

属性にバインドされている場合、プロパティも属性から文字列化された値を受け取るだけです。
プロパティにバインドされた場合、プロパティはそれにバインドされた値（boolean, number, object, ...）を受け取り、属性は再び文字列化された値を受け取ります。

属性名とプロパティ名が一致しない場合の2つのケース。

• angular 2.0テンプレートでラベルに"for"属性を追加する際にエラーが発生する。

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (説明文の最初の文参照 htmlFor property reflects the value of the for - for CやJavaScriptのキーワードなので、おそらくうまくいかなかったのでしょう)

• Angular 2でcolspanが既知のネイティブ属性でないのはなぜですか？

Angular はその後変更され、これらの特殊なケースを認識し、バインドできるように処理するようになりました。 <label [for]=" は、そのようなプロパティが存在しないにもかかわらず、（同じ colspan )