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

小开

最佳答案

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

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

Property-attribute连接

当绑定到属性时，属性也只接收属性的字符串化值当绑定到属性时，属性接收绑定到它的值(布尔值，数字，对象，…)，属性再次接收字符串化的值。< / p >

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

添加"for"时出错;属性为angular 2.0模板中的标签

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也是一样)

小开

在angular-2属性语法中是

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

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

所以可以用like

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

小开

内联地图也很方便。

他们更明确一点&可读性也很好。

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

这只是完成同样事情的另一种方式，以防你不喜欢三元语法或ngIfs(等等)。

小开

如果它是一个输入元素，你可以写一些类似....的东西 <input type="radio" [checked]="condition"> condition的值必须为true或false

同样适用于样式属性… <h4 [style.color]="'red'">Some text</h4> < / p >

小开

精炼Günter Zöchbauer答案:

现在情况似乎有所不同。我试图这样做，有条件地应用一个href属性到一个锚标记。你必须使用undefined来表示“不适用”的情况。作为示例，我将演示一个有条件地应用href属性的链接。

< p >——编辑看起来angular改变了一些东西，所以null现在会像预期的那样工作。我更新了示例，使用null而不是undefined.

没有href属性的锚标记将变成纯文本，指示链接的占位符，根据超链接规范。

对于我的导航，我有一个链接列表，但其中一个链接代表当前页面。我不希望当前页面链接是一个链接，但仍然希望它出现在列表中(它有一些自定义样式，但这个例子是简化的)。

<a [attr.href]="currentUrl !== link.url ? link.url : null">

我认为这比在span和anchor标签上使用两个*ngIf更简洁。它还非常适合为按钮添加禁用属性。

小开

你可以用这个。

<span [attr.checked]="val? true : false"> </span>

小开

对于为已经存在的scss编写HTML的人来说，您可以使用更好的方法。
超文本标记语言

[attr.role]="<boolean>"

scss

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

这样你就不需要每次都<boolean> ? true : null了。

小开

在这里，段落只打印'isValid'为真/它包含任何值

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

小开

我想有tooltip 只有为一个特定的字段添加如下代码，但你想有tooltip在multiplent，你可以有一个数组验证使用:

具有自定义data-tooltip属性的多个元素:

1: [“key1ToHaveTooltip”、“key2ToHaveTooltip ']其中(关键)

2: ['key1ToHaveTooltip'， 'key2ToHaveTooltip'].indexOf(key) > -1

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

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

小开

如果你确实需要checked，最好使用property而不是attribute，并为它分配一些布尔值:

<input type="checkbox" [checked]="smth">

如果你想有条件地添加任意属性，你可以使用binding对它:

<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 + ""
}
}

这就是结果:

标记: