我如何有条件地添加元素属性,例如复选框的checked
?
以前版本的Angular有NgAttr
,我认为NgChecked
似乎都提供了我所追求的功能。但是,Angular 2中似乎不存在这些属性,我看不到提供此功能的其他方法。
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。
也适用于风格属性... <h4 [style.color]="'red'">Some text</h4>
你可以用它。
<span [attr.checked]="val? true : false"> </span>
它们也更加明确和可读。
[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"
如果您不喜欢三元语法或ngIf
s(等),只是完成相同事情的另一种方式。