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

Question

如何有条件地添加元素属性，例如 checked 复选框？

以前版本的 Angular 有 NgAttr ，我认为 NgChecked 似乎都提供了我所追求的功能。但是，这些属性在 Angular 2 中似乎不存在，而且我看不到提供此功能的其他方式。

原文由 Jon Miles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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]="..." 绑定，值 ( ... ) 始终 是字符串化的。只有 properties 和 @Input() s 可以接收其他值类型，如 boolean、number、object、…

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

属性-属性连接

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

当绑定到属性时，属性接收绑定到它的值（布尔值，数字，对象，…）和属性再次字符串化的值。

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

• 在 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 中）

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

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

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 angular-2 属性语法中是

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

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

所以可以像这样使用

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

原文由 Shaishab Roy 发布，翻译遵循 CC BY-SA 3.0 许可协议