我如何有条件地添加元素属性,例如 checked 的复选框?
checked
以前版本的Angular有 NgAttr ,我认为 NgChecked 似乎都提供了我所追求的功能 . 但是,Angular 2中似乎不存在这些属性,我看不到提供此功能的其他方法 .
NgAttr
NgChecked
null 删除它:
null
[attr.checked]="value ? '' : null"
要么
[attr.checked]="value ? 'checked' : null"
在angular-2属性语法中
<div [attr.role]="myAriaRole">
将属性角色绑定到表达式myAriaRole的结果 .
所以可以使用像
[attr.role]="myAriaRole ? true: null"
精炼GünterZöchbauer答案:
现在这似乎有所不同 . 我试图这样做有条件地将href属性应用于锚标记 . 您必须对“不适用”案例使用undefined . 作为一个例子,我将演示一个有条件地应用了href属性的链接 .
没有href属性的锚标记变为纯文本,表示链接的占位符,符合hyperlink spec .
对于我的导航,我有一个链接列表,但其中一个链接代表当前页面 . 我不希望当前页面链接成为链接,但仍希望它出现在列表中(它有一些自定义样式,但此示例已简化) .
<a [attr.href]="currentUrl !== link.url ? link.url : undefined">
我认为这比在span和anchor标签上使用两个* ngIf更干净 .
如果它是一个输入元素,你可以编写类似的东西.... <input type="radio" [checked]="condition"> 条件的值必须为true或false .
<input type="radio" [checked]="condition">
也适用于样式属性... <h4 [style.color]="'red'">Some text</h4>
<h4 [style.color]="'red'">Some text</h4>
它们也更加明确和可读 .
[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"
只是另一种完成同样事情的方法,如果你不喜欢三元句法或 ngIf (等) .
ngIf
5 回答
null
删除它:要么
在angular-2属性语法中
将属性角色绑定到表达式myAriaRole的结果 .
所以可以使用像
精炼GünterZöchbauer答案:
现在这似乎有所不同 . 我试图这样做有条件地将href属性应用于锚标记 . 您必须对“不适用”案例使用undefined . 作为一个例子,我将演示一个有条件地应用了href属性的链接 .
没有href属性的锚标记变为纯文本,表示链接的占位符,符合hyperlink spec .
对于我的导航,我有一个链接列表,但其中一个链接代表当前页面 . 我不希望当前页面链接成为链接,但仍希望它出现在列表中(它有一些自定义样式,但此示例已简化) .
我认为这比在span和anchor标签上使用两个* ngIf更干净 .
如果它是一个输入元素,你可以编写类似的东西....
<input type="radio" [checked]="condition">
条件的值必须为true或false .也适用于样式属性...
<h4 [style.color]="'red'">Some text</h4>
Inline-Maps也很方便 .
它们也更加明确和可读 .
只是另一种完成同样事情的方法,如果你不喜欢三元句法或
ngIf
(等) .