如何有条件地添加元素属性，例如复选框的checked？
以前版本的 Angular 有 NgAttr，我认为 NgChecked 似乎都提供了我所追求的功能。但是，这些属性在 Angular 2 中似乎不存在，我认为没有其他方法可以提供此功能。
【问题讨论】：
标签： javascript angular
如果你确实需要checked，最好使用属性而不是属性并为其分配一些布尔值：
<input type="checkbox" [checked]="smth">
如果你想有条件地添加任意属性，你可以使用绑定到它：
<p [attr.data-smth]="smth">
undefined或null则不添加属性。当然，你也可以和attr.checked一起使用：
<input type="checkbox" [attr.checked]="smth ? '' : null">
但请注意，在这种情况下 attr 与被检查不同步，因此请遵循组合
<input type="checkbox" [checked]="false" [attr.checked]="''">
将导致带有checked 属性的未选中复选框。
还有一个完整的例子：
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<p [attr.data-smth]="e">The value is: {{what(e)}}</p>
<p [attr.data-smth]="s">The value is: {{what(s)}}</p>
<p [attr.data-smth]="u">The value is: {{what(u)}}</p>
<p [attr.data-smth]="n">The value is: {{what(n)}}</p>
<p [attr.data-smth]="t">The value is: {{what(t)}}</p>
<p [attr.data-smth]="f">The value is: {{what(f)}}</p>
<input type="checkbox" [checked]="t">
<input type="checkbox" [checked]="f">
<input type="checkbox" [attr.checked]="t ? '' : null">
<input type="checkbox" [attr.checked]="f ? '' : null">
<input type="checkbox" [checked]="false" [attr.checked]="''">
`,
styles: [`
p[data-smth] {
color: blue;
}
`]
})
export class AppComponent {
e = ""
s = "abc"
u = undefined
n = null
t = true
f = false
what(x) {
return typeof x === 'string' ? JSON.stringify(x) : x + ""
}
}
结果如下：
和标记：
【讨论】：
精炼 Günter Zöchbauer 答案：
现在看来不一样了。我试图这样做以有条件地将 href 属性应用于锚标记。对于“不适用”的情况，您必须使用 undefined。作为示例，我将演示一个有条件地应用了 href 属性的链接。
--编辑--
看起来 Angular 改变了一些东西，所以 null 现在可以按预期工作。我已将示例更新为使用 null 而不是 undefined。
没有 href 属性的锚标记变为纯文本，表示链接的占位符，根据 hyperlink spec。
对于我的导航，我有一个链接列表，但其中一个链接代表当前页面。我不希望当前页面链接成为链接，但仍希望它出现在列表中（它有一些自定义样式，但此示例已简化）。
<a [attr.href]="currentUrl !== link.url ? link.url : null">
我认为这比在跨度和锚标记上使用两个 *ngIf 更干净。它也非常适合为按钮添加禁用属性。
【讨论】：
我希望仅为特定字段添加工具提示，如下面的代码中添加的，但您希望在多线程上有工具提示，您可以使用以下方法验证数组：
具有自定义 data-tooltip 属性的多个元素：
1: ['key1ToHaveTooltip', `key2ToHaveTooltip'].includes(key)
2: ['key1ToHaveTooltip', 'key2ToHaveTooltip'].indexOf(key) > -1
在超过 1 个元素上拥有 tooltip 属性。
<div *ngFor="let key of Keys"
[attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute'
? 'Hey! I am a tooltip on key matched'
: null">
</div>
【讨论】：
null 删除它：
[attr.checked]="value ? '' : null"
或
[attr.checked]="value ? 'checked' : null"
当您添加此绑定的 HTML 元素没有与绑定中使用的名称相同的属性（在本例中为 checked）并且没有 Angular 组件或指令应用于具有 @987654329 的相同元素时@，那么[xxx]="..."就不能用了。
另见What is the difference between properties and attributes in HTML?
替代方案是 [style.xxx]="..."、[attr.xxx]="..."、[class.xxx]="..."，具体取决于您要完成的任务。
因为<input> 仅具有checked 属性，但没有checked 属性[attr.checked]="..." 是这种特定情况的正确方法。
一个常见的缺陷是[attr.xxx]="..." 绑定的值（...）总是 字符串化。只有属性和@Input()s 可以接收其他值类型，如布尔、数字、对象……
大多数元素的属性和属性是相互关联的并且具有相同的名称。
当绑定到属性时，属性也只接收来自属性的字符串化值。
当绑定到属性时，属性接收绑定到它的值（布尔值，数字，对象，...），属性再次接收字符串化值。
属性和属性名称不匹配的两种情况。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor（参见描述的第一句htmlFor property reflects the value of the for - for 可能不起作用，因为它是 C 或 JavaScript 中的关键字）
从那时起，Angular 发生了变化，并且知道这些特殊情况并处理它们，以便您可以绑定到 <label [for]="，即使不存在此类属性（colspan 也是如此）
【讨论】：
attr.。但是如果要添加自定义属性，肯定需要attr.前缀
attr. 部分。我试图设置 [href] 并且只希望在项目的 href 属性存在时设置它。如果没有[attr.href]，这将添加一个值为“null”的href，单击该href 将刷新当前页面。 [attr.href] 已修复。
href 属性的元素上设置href，则无需使用attr。一定有其他问题。
<a [href]="item.href">，其中 item.href 未定义（不是未定义的值，但属性 href 不存在item) 将 href 属性设置为 null。我没有深入研究源代码，因为老实说，我现在并不在意（这是一个很小的细节），但attr. 完全是一个不同的指令，因此它的不同表现对我来说并不奇怪。
此处，仅打印段落'isValid'为真/它包含任何值
<p *ngIf="isValid ? true : false">Paragraph</p>
【讨论】：
对于为已经存在的 scss 编写 HTML 的人，您可以使用更好的方法。
html
[attr.role]="<boolean>"
scss
[role = "true"] { ... }
这样你就不需要每次都<boolean> ? true : null。
【讨论】：
select 元素上的 multiple 属性。
你可以用这个。
<span [attr.checked]="val? true : false"> </span>
【讨论】：
如果它是一个输入元素，您可以编写类似...
<input type="radio" [checked]="condition">条件值必须为真或假。
同样适用于样式属性...
<h4 [style.color]="'red'">Some text</h4>
【讨论】：
它们也更加明确和可读。
[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"
如果您不喜欢三元语法或ngIfs（等），这只是完成同一件事的另一种方式。
【讨论】：
<input type="checkbox" name="vehicle" value="Car" checked> 中的checked 属性（从输入标签中添加/删除它）吗？ （如果我们在您的代码中将 class 更改为 checkbox 它将不起作用（我检查一下））
在 angular-2 属性语法中是
<div [attr.role]="myAriaRole">
将属性角色绑定到表达式 myAriaRole 的结果。
所以可以用like
[attr.role]="myAriaRole ? true: null"
【讨论】：
your expression 是false 时，DOM 中的属性将看起来像<div checked="false">。我不认为这是预期的效果。
attr.。但是如果要添加自定义属性，肯定需要attr.前缀