How to add conditional attribute in Angular 2?
我如何有条件地添加元素属性，例如 复选框的checked？
以前版本的Angular有NgAttr，我认为NgChecked似乎都提供了我所追求的功能。 但是，Angular 2中似乎不存在这些属性，我看不到提供此功能的其他方法。
-
另请参见：stackoverflow.com/questions/36240736/
-
另请参见：stackoverflow.com/questions/42179150/
-
googlers，如果您想要一个角度组件的无值属性，请参阅此处
null删除它：
1
| [attr.checked]="value ? '' : null" |
要么
1
| [attr.checked]="value ? 'checked' : null" |
-
你可以省略"attr"。字首。
-
@FilipStachowiak然后它将不会成为一个属性。在许多元素上有各种属性，其中元素本身将属性绑定到属性的值(以及另一个方向)。在这种情况下，您不需要attr.。但是如果要添加自定义属性，则肯定需要attr.前缀
-
需要说明的是，您需要attr.部分。我试图设置[href]并且只想在项目的href属性存在时才设置它。如果没有[attr.href]，这将添加一个值为'null'的href，当单击它时，将刷新当前页面。 [attr.href]修复它。
-
@dudewad听起来不对我。如果在具有href属性的元素上设置href，则无需使用attr。一定有别的东西出错了。
-
@ gnter-zchbauer好吧，我正在使用Ng 4.x和，其中item.href未定义(未定义值，但item上不存在属性href)正在设置< x4>属性为null。我没有深入研究来源，因为说实话我并不在乎(这是一个很小的细节)，但attr.完全是一个不同的指令，因此它的表现不同并不令我感到意外。
-
attr.不是指令。这是特殊的Angular语法。我不认为我完全理解你的评论。当item最初undefined或null时，您可能希望防止错误。
-
关于attr.语法的Angular文档中暗示的另一个限制或区别："然后使用解析为字符串的表达式设置属性值。"虽然null解析，有条件地删除属性，但似乎我无法使用此方法提供非字符串数据绑定到第三方模块的自定义配置属性(即sortablejs和sortablejsOptions angular-sortablejs)尝试通过这种方法有条件地提供属性。
-
属性始终只能是字符串。如果你想要其他类型(对象)，你需要属性绑定(没有attr.)
在angular-2属性语法中
将属性角色绑定到表达式myAriaRole的结果。
所以可以使用像
1
| [attr.role]="myAriaRole ? true: null" |
-
这里的问题是当your expression false时，DOM中的属性看起来像。我不认为这是预期的效果。
-
谢谢，但我问如何有条件地添加属性，而不是有条件地分配它的值。
-
你甚至可以省略"attr"。字首。
-
@FilipStachowiak然后它将不会成为一个属性。在许多元素上有各种属性，其中元素本身将属性绑定到属性的值(以及另一个方向)。在这种情况下，您不需要attr.。但是如果要添加自定义属性，则肯定需要attr.前缀
精炼GünterZ？chbauer回答：
现在这似乎有所不同。我试图这样做有条件地将href属性应用于锚标记。您必须对"不适用"案例使用undefined。作为一个例子，我将演示一个有条件地应用了href属性的链接。
根据超链接规范，没有href属性的锚标记将变为纯文本，表示链接的占位符。
对于我的导航，我有一个链接列表，但其中一个链接代表当前页面。我不希望当前页面链接成为链接，但仍希望它出现在列表中(它有一些自定义样式，但此示例已简化)。
我认为这比在span和anchor标签上使用两个* ngIf更干净。
如果它是一个输入元素，你可以写像......
条件的值必须为true或false。
也适用于风格属性......
Some text
你可以用它。
-
您使用'val'检查了属性值。如果它变为真，那么简单地返回true，否则返回false值
内联地图也很方便。
它们也更加明确和可读。
1
| [class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]" |
如果您不喜欢三元语法或ngIf s(等)，只需另一种方法来完成同样的事情。