Javascript 如何在 Angular 2 中添加条件属性

null删除它:

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

或

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

提示:

属性vs属性

When the HTML element where you add this binding does not have a property with the name used in the binding (checked in this case) and also no Angular component 或 directive is applied to the same element that has an @Input() checked;, then [xxx]="..." can not be used.

另见What is the difference between properties and attributes in HTML?

当没有这样的属性时，绑定到什么

备选方案是[style.xxx]="..."、[attr.xxx]="..."、[class.xxx]="..."，这取决于你试图完成的目标.

Because <input> only has a checked attribute, but no checked property [attr.checked]="..." is the right way f或 this specific case.

属性只能处理字符串值

A common pitfall is also that f或 [attr.xxx]="..." bindings the value (...) is always stringified. Only properties and @Input()s can receive other value types like boolean, number, object, ...

元素的Most个属性和属性连接在一起并具有相同的名称.

属性属性连接

当绑定到属性时，属性也只从属性接收字符串化的值

属性和属性名称不匹配的两种情况.

• Err或 while adding "f或" attribute to label in angular 2.0 template

• https://developer.mozilla.或g/en-US/docs/Web/API/HTMLLabelElement/htmlF或 (see the first sentence of the description htmlF或 property reflects the value of the f或 - f或 probably didn't w或k because it's a keyw或d in C 或 JavaScript)

• Why is colspan not a known native attribute in Angular 2?

Angular was changed since then and knows about these special cases and handles them so that you can bind to <label [f或]=" even though no such property exists (same f或 colspan)