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

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

已选中的

Angular的早期版本有
NgAttr
，我认为
NgChecked
，它们似乎都提供了我所追求的功能。但是，这些属性在Angular 2中似乎不存在，我看不到提供此功能的其他方式。
null
将其删除：

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

或

提示：
属性vs属性
当添加此绑定的HTML元素没有与绑定中使用的名称相同的属性（
在本例中已选中
），并且没有向选中了
@Input（）的同一元素应用角度组件或指令时，则不能使用
[xxx]=“…”

另见

没有此类属性时绑定到什么
备选方案有
[style.xxx]=“…”
，
[attr.xxx]=“…”
，
[class.xxx]=“…”
，具体取决于您试图完成的任务

因为
只有一个
选中的
属性，但是没有
选中的
属性
[attr.checked]=“…”
是这个特定情况的正确方法

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

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

属性属性连接
当绑定到属性时，属性也仅从属性接收字符串化值。

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

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



（请参见描述
htmlFor属性的第一句话，它反映了for
-
for
的值可能不起作用，因为它是C或JavaScript中的关键字）



Angular从那时起就被更改了，并且知道这些特殊情况并处理它们，以便您可以在Angular-2属性语法中绑定到

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

内联地图也很方便。
它们更加明确易读

[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"

如果您不喜欢三元语法或ngIf
s（等），这只是实现相同功能的另一种方法。
如果是输入元素，您可以编写如下内容。。。。
条件的值必须为真或假

还有样式属性。。。
一些文本
精炼Günter Zöchbauer答案：

现在看来不同了。我尝试这样做是为了有条件地将href属性应用于锚标记。对于“不适用”情况，必须使用“未定义”。作为一个例子，我将用一个链接演示有条件地应用href属性

--编辑--
看起来angular已经改变了一些事情，所以
null
现在将按预期工作。我已经将示例更新为使用
null
而不是
未定义的

根据，不带href属性的锚定标记将变成纯文本，表示链接的占位符

对于我的导航，我有一个链接列表，但其中一个链接代表当前页面。我不希望当前页面链接成为一个链接，但仍然希望它出现在列表中（它有一些自定义样式，但此示例已简化）



我认为，这比在跨度和锚定标签上使用两个*ngIf更干净。它还非常适合向按钮添加禁用属性。
您可以使用它

您可以使用更好的方法为已经存在的SCS编写HTML。

html

这样你就不需要
？true：每次为空。
此处仅打印段落“isValid”为true/它包含任何值

<p *ngIf="isValid ? true : false">Paragraph</p>

段落

我只想为下面代码中添加的特定字段设置工具提示，，但如果您想在倍数上设置工具提示，则可以使用以下方法设置数组值：

具有自定义数据工具提示属性的多个元素：

1:['key1ToHaveTooltip'，'key2ToHaveTooltip']。包括（键）

2:['key1ToHaveTooltip'，'key2ToHaveTooltip'].索引（键）>-1

在多个元素上具有工具提示属性

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>


这里的问题是，当表达式
为
false
时，DOM中的属性看起来像
。我认为这不是预期的效果。谢谢，但我问了如何有条件地添加属性，而不是有条件地分配它的值。你甚至可以省略“attr.”前缀。@FilipStachowiak，那么它就不会成为属性了。许多元素上有各种属性，其中元素本身将绑定到属性的值反映到属性（以及其他方向）。在这种情况下，您不需要
attr.
。但是如果你想添加一个自定义属性，你肯定需要
attr.
prefixoh-man，这个：null是令人惊奇的，我知道这可以用在conditional中！感谢您提供的解决方案。另请参见：另请参见：谷歌，如果您希望角组件具有无值属性，可以省略“attr.”前缀。@FilipStachowiak，那么它将不会成为属性。许多元素上有各种属性，其中元素本身将绑定到属性的值反映到属性（以及其他方向）。在这种情况下，您不需要
attr.
。但是如果您想添加一个自定义属性，您肯定需要
attr.
prefixTo要清楚，您需要这个属性的
attr.
部分。我试图设置
[href]<a [attr.href]="currentUrl !== link.url ? link.url : null">

[attr.role]="<boolean>"

[role = "true"] { ... }

<p *ngIf="isValid ? true : false">Paragraph</p>

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>