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

问题描述 投票:186回答:6

我如何有条件地添加元素属性,例如复选框的checked

以前版本的Angular有NgAttr,我认为NgChecked似乎都提供了我所追求的功能。但是,Angular 2中似乎不存在这些属性,我看不到提供此功能的其他方法。

javascript angular
6个回答
444
投票

null删除它:

[attr.checked]="value ? '' : null"

要么

[attr.checked]="value ? 'checked' : null"

29
投票

在angular-2属性语法中

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

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

所以可以使用像

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

11
投票

精炼GünterZöchbauer答案:

现在这似乎有所不同。我试图这样做有条件地将href属性应用于锚标记。您必须对“不适用”案例使用undefined。作为一个例子,我将演示一个有条件地应用了href属性的链接。

没有href属性的锚标记变为纯文本,表示根据hyperlink spec链接的占位符。

对于我的导航,我有一个链接列表,但其中一个链接代表当前页面。我不希望当前页面链接成为链接,但仍希望它出现在列表中(它有一些自定义样式,但此示例已简化)。

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

我认为这比在span和anchor标签上使用两个* ngIf更干净。


3
投票

如果它是一个输入元素,你可以写一些像...... <input type="radio" [checked]="condition">条件的值必须是true或false。

也适用于风格属性... <h4 [style.color]="'red'">Some text</h4>


2
投票

你可以用它。

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


-7
投票

Inline-Maps are handy, too.

它们也更加明确和可读。

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

如果您不喜欢三元语法或ngIfs(等),只是完成相同事情的另一种方式。

© www.soinside.com 2019 - 2024. All rights reserved.