如何有条件地添加一个元素属性,例如checked
复选框的?
NgAttr
我认为Angular的早期版本已经提供,而我认为NgChecked
它们似乎都提供了我所追求的功能。但是,这些属性在Angular 2中似乎不存在,我看不到提供此功能的其他方法。
如何有条件地添加一个元素属性,例如checked
复选框的?
NgAttr
我认为Angular的早期版本已经提供,而我认为NgChecked
它们似乎都提供了我所追求的功能。但是,这些属性在Angular 2中似乎不存在,我看不到提供此功能的其他方法。
Answers:
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()
s可以接收其他值类型,例如布尔值,数字,对象,...
元素的大多数属性和属性都是连接的,并且具有相同的名称。
当绑定到属性时,该属性也仅从该属性接收字符串化的值。
当绑定到该属性时,该属性将接收与其绑定的值(布尔值,数字,对象等),而该属性又是字符串化的值。
属性和属性名称不匹配的两种情况。
https://developer.mozilla.org/zh-CN/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
undefined(不是undefined值,但该属性href
不存在item
)的href
属性设置为null
。我没有深入到源,因为老实说,我在这一点上(这是一个很小的细节)并不太在乎,但是attr.
是不同的指令完全,因此作用不同也就不奇怪了我。
在angular-2属性语法中,是
<div [attr.role]="myAriaRole">
将属性角色绑定到表达式myAriaRole的结果。
所以可以用像
[attr.role]="myAriaRole ? true: null"
your expression
是false
在DOM属性的样子<div checked="false">
。我认为这不是预期的效果。
attr.
。但是,如果你想添加自定义属性,你肯定需要的attr.
前缀
提炼GünterZöchbauer的答案:
现在似乎有所不同。我试图这样做,以便有条件地将href属性应用于锚标记。对于“不适用”情况,必须使用undefined。作为示例,我将通过有条件地应用href属性的链接进行演示。
根据超链接规范,没有href属性的锚标记变为纯文本,表示链接的占位符。
对于我的导航,我有一个链接列表,但是其中一个链接代表当前页面。我不希望当前页面链接成为链接,但仍然希望它出现在列表中(它具有一些自定义样式,但是此示例已简化)。
<a [attr.href]="currentUrl !== link.url ? link.url : undefined">
我认为这比在span和anchor标签上使用两个* ngIf更干净。
对于为现有的scss编写HTML的人,可以使用更好的方法。
html
[attr.role]="<boolean>"
脚本
[role = "true"] { ... }
这样,您就不必<boolean> ? true : null
每次都这样。
multiple
用于select
element的属性。
在这里,该段落仅打印为“ isValid”为真/它包含任何值
<p *ngIf="isValid ? true : false">Paragraph</p>
我想只在下面的代码中添加特定字段的工具提示,但是您想要在multint上使用工具提示,可以使用以下方法获取数组valdidate:
具有自定义data-tooltip属性的多个Elements :
1:[ 'key1ToHaveTooltip',`key2ToHaveTooltip']。includes(key)
2:['key1ToHaveTooltip','key2ToHaveTooltip']。indexOf(key)> -1
在超过1个元素上具有工具提示属性。
<div *ngFor="let key of Keys"
[attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute'
? 'Hey! I am a tooltip on key matched'
: null">
</div>
它们也更加明确和易读。
[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"
如果您不喜欢三元语法或ngIf
s(等),则这是完成同一件事的另一种方法。
checked
属性一起使用(从输入标签添加/删除输入标签) <input type="checkbox" name="vehicle" value="Car" checked>
吗?(如果我们更改class
为checkbox
您的代码,则无法使用(我对此进行了检查))