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

null删除它：

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

或

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

提示：

特性与属性

如果添加此绑定的 HTML 元素没有具有绑定中使用的名称的属性（在本例中），并且没有 Angular 组件或指令应用于具有 的同一元素，则不能使用。checked@Input() checked;[xxx]="..."

另请参阅 HTML 中的属性和特性之间有什么区别？

当没有此类属性时要绑定到的内容

备选方案是 、 ，具体取决于您尝试完成的任务。[style.xxx]="..."[attr.xxx]="..."[class.xxx]="..."

因为只有一个属性，但没有属性是这种特定情况的正确方法。<input>checkedchecked[attr.checked]="..."

属性只能处理字符串值

一个常见的陷阱是，对于绑定，值 （） 始终是字符串化的。只有属性和 s 可以接收其他值类型，如布尔值、数字、对象等。[attr.xxx]="..."...@Input()

元素的大多数属性和特性都是相互连接的，并且具有相同的名称。

属性-特性连接

绑定到特性时，该属性也仅从该特性接收字符串化值。
绑定到属性时，属性接收绑定到它的值（布尔值、数字、对象等），并再次接收属性的字符串化值。

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

• 将“for”属性添加到角度 2.0 模板中的标签时出错

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor（请参阅描述的第一句话 - 可能不起作用，因为它是C或JavaScript中的关键字）htmlFor property reflects the value of the forfor

• 为什么 colspan 在 Angular 2 中不是已知的原生属性？

从那时起，Angular发生了变化，并且知道这些特殊情况并处理它们，以便您可以绑定到即使不存在此类属性（对于<label [for]="colspan)

在 angular-2 属性语法中是

<div [attr.role]="myAriaRole">

将属性角色绑定到表达式 myAriaRole 的结果。

所以可以使用喜欢

[attr.role]="myAriaRole ? true: null"