Angular 2で条件付き属性を追加するにはどうすればいいですか? 質問する

null削除します:

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

または

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

ヒント：

属性とプロパティ

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

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

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

達成したい内容に応じて、代替案は[style.xxx]="..."、、となります。[attr.xxx]="..."[class.xxx]="..."

<input>属性のみがありchecked、checkedプロパティがないため[attr.checked]="..."、この特定のケースでは正しい方法ではありません。

属性は文字列値のみを扱うことができる

[attr.xxx]="..."よくある落とし穴は、バインディングの場合、値 ( ...) が常に文字列化されることです。プロパティと のみが@Input()、ブール値、数値、オブジェクトなどの他の値型を受け取ることができます。

要素のほとんどのプロパティと属性は接続されており、同じ名前を持ちます。

プロパティと属性のつながり

属性にバインドされている場合、プロパティも属性から文字列化された値のみを受け取ります。
プロパティにバインドされている場合、プロパティはバインドされている値 (ブール値、数値、オブジェクトなど) を受け取り、属性は再び文字列化された値を受け取ります。

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

• Angular 2.0 テンプレートのラベルに「for」属性を追加中にエラーが発生しました

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor(説明の最初の文を参照してくださいhtmlFor property reflects the value of the for- forC または JavaScript のキーワードであるため、おそらく機能しませんでした)

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

<label [for]="Angularはそれ以降変更され、これらの特殊なケースを認識して処理するため、そのようなプロパティが存在しない場合でも にバインドできます（ も同様ですcolspan）。