如何有条件地添加元素属性,例如复选框的checked
属性?
在之前的Angular版本中有NgAttr
和NgChecked
,它们似乎都提供了我所需要的功能。然而,在Angular 2中似乎不存在这些属性,我也没有找到其他提供此功能的方法。
如何有条件地添加元素属性,例如复选框的checked
属性?
在之前的Angular版本中有NgAttr
和NgChecked
,它们似乎都提供了我所需要的功能。然而,在Angular 2中似乎不存在这些属性,我也没有找到其他提供此功能的方法。
null
将其删除:
[attr.checked]="value ? '' : null"
或[attr.checked]="value ? 'checked' : null"
当您添加此绑定的 HTML 元素没有与绑定中使用的名称相同的属性(在本例中为 checked
),并且也没有应用任何 Angular 组件或指令到具有 @Input() checked;
的相同元素上时,则不能使用 [xxx]="..."
。
根据您所尝试完成的任务,替代方案是 [style.xxx]="..."
、[attr.xxx]="..."
、[class.xxx]="..."
。
由于 <input>
只有一个 checked
属性,但没有 checked
属性,因此 [attr.checked]="..."
是这种特定情况下正确的方法。
常见陷阱还包括对于 [attr.xxx]="..."
绑定,其值 (...
) 总是被字符串化。只有属性和 @Input()
可以接收其他值类型,例如布尔值、数字、对象,等等。
大多数元素的属性和属性值是相互关联并具有相同的名称。
当绑定到属性值时,属性也只接收来自属性值的字符串化值。
当绑定到属性时,属性接收绑定到它的值(布尔值、数字、对象等),而属性值再次是字符串化的值。
两种情况下属性和属性值的名称不匹配。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor(请参阅说明的第一句话 htmlFor 属性反映 for 的值
- for
可能没有工作,因为它是 C 或 JavaScript 中的关键字)
自那时起,Angular 已经发生了变化,并知道这些特殊情况并处理它们,以便您可以绑定到 <label [for]="
即使没有这样的属性(对于 colspan
也是如此)。
attr.
。但是如果您想添加自定义属性,则肯定需要 attr.
前缀。 - Günter Zöchbauerattr.
这一部分。我试图设置 [href]
属性,并且只想在该项的 href
属性存在时才设置它。如果没有 [attr.href]
,这将会添加一个值为“null”的 href 属性,当它被点击时,会刷新当前页面。有了 [attr.href]
就解决了这个问题。 - dudewadhref
属性的元素上设置href
,则无需使用attr
。肯定还有其他问题。 - Günter Zöchbauerattr.
不是一个指令,而是Angular的特殊语法。我不确定我完全理解了你的评论。也许你想要使用<a [href]="item?.href"
来防止在item
最初为undefined
或null
时出现错误。 - Günter Zöchbauer在Angular 2中,属性语法是
<div [attr.role]="myAriaRole">
将属性“role”绑定到表达式“myAriaRole”的结果。
因此可以这样使用:
[attr.role]="myAriaRole ? true: null"
дҪ зҡ„иЎЁиҫҫејҸ
дёәfalse
ж—¶пјҢDOMдёӯзҡ„еұһжҖ§е°ҶжҳҫзӨәдёә<div checked="false">
гҖӮжҲ‘и®ӨдёәиҝҷдёҚжҳҜйў„жңҹзҡ„ж•ҲжһңгҖӮ - Günter Zöchbauerattr.
。但是,如果您想添加自定义属性,则绝对需要 attr.
前缀。 - Günter Zöchbauer优化Günter Zöchbauer的答案:
现在看起来有些不同了。我试图这样做是为了有条件地将href属性应用于锚标记。你必须使用未定义的值来表示“不适用”的情况。例如,我将演示如何有条件地应用href属性的链接。
--编辑--
看起来Angular已经改变了一些东西,所以null
现在可以按预期工作了。我已经更新了示例以使用null
而不是undefined
。
没有href属性的锚标记变成普通文本,表示链接的占位符,根据超链接规范。
对于我的导航,我有一个链接列表,但其中一个链接代表当前页面。我不希望当前页面链接成为链接,但仍然希望它出现在列表中(它有一些自定义样式,但这个示例被简化了)。
<a [attr.href]="currentUrl !== link.url ? link.url : null">
我认为这比在span和anchor标签上使用两个*ngIf要更简洁。它还非常适合给按钮添加禁用属性。
如果你需要确切的checked
,最好使用属性而不是属性值,并将某个布尔值分配给它:
<input type="checkbox" [checked]="smth">
<p [attr.data-smth]="smth">
undefined
或null
,则不添加属性。当然,你也可以与attr.checked
一同使用:
<input type="checkbox" [attr.checked]="smth ? '' : null">
<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 + ""
}
}
这是标记:
<input type="radio" [checked]="condition">
其中condition的值必须为true或false。<h4 [style.color]="'red'">一些文本</h4>
您可以使用这个。
<span [attr.checked]="val? true : false"> </span>
如果有人在已经存在的scss文件中编写HTML,您可以使用更好的方法。
[attr.role]="<boolean>"
scss
[role = "true"] { ... }
<boolean> ? true : null
。select
元素上的multiple
属性一起使用。 - smartmouse我想在代码中只对特定字段添加工具提示,如下所示,但是如果要在多个字段上添加工具提示,则可以使用以下方法创建数组进行验证:
拥有自定义data-tooltip属性的多个元素:
1: ['key1ToHaveTooltip','key2ToHaveTooltip']包含(key)
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>
在这里,仅当'isValid'为真/包含任何值时,才打印该段落
<p *ngIf="isValid ? true : false">Paragraph</p>
它们更加明确易读。
[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"
如果你不喜欢三元语法或者ngIf等方式,这是完成相同任务的另一种方法。
checked
属性一起使用(将其添加/从输入标签中删除)在<input type="checkbox" name="vehicle" value="Car" checked>
中?(如果我们在您的代码中将class
更改为checkbox
,它将无法正常工作(我已经检查过了)) - Kamil Kiełczewski