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


276

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

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




2
googlers,如果您希望为角度分量提供无价值的属性,请参见此处
Frank Nocke

Answers:


574

null 删除它:

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

要么

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

暗示:

属性与属性

当您在其中添加此绑定的HTML元素不具有该绑定中使用的名称的属性(checked在这种情况下),并且也没有将Angular组件或指令应用于具有的同一元素时@Input() checked;,则[xxx]="..."无法使用。

另请参见HTML中的属性和属性有什么区别?

没有此类属性时要绑定的内容

替代方案是[style.xxx]="..."[attr.xxx]="..."[class.xxx]="..."这取决于你试图完成什么。

因为<input>仅具有checked属性,但没有checked属性[attr.checked]="..."是此特定情况的正确方法。

属性只能处理字符串值

常见的陷阱还在于,对于[attr.xxx]="..."绑定,值(...始终是字符串化的。仅属性和@Input()s可以接收其他值类型,例如布尔值,数字,对象,...

元素的大多数属性和属性都是连接的,并且具有相同的名称。

属性-属性连接

当绑定到属性时,该属性也仅从该属性接收字符串化的值。
当绑定到该属性时,该属性将接收与其绑定的值(布尔值,数字,对象等),而该属性又是字符串化的值。

属性和属性名称不匹配的两种情况。

此后Angular进行了更改,知道了这些特殊情况并进行了处理,<label [for]="即使没有这样的属性,您也可以绑定到(与相同colspan


3
您可以省略“ attr”。字首。
Filip Stachowiak

16
@FilipStachowiak,那么它就不会成为属性。许多元素上都有各种属性,其中元素本身将绑定到属性的值反映到属性(以及另一个方向)。在这种情况下,您不需要attr.。但是,如果你想添加自定义属性,你肯定需要的attr.前缀
君特Zöchbauer

14
要清楚,您需要attr.部分。我正在尝试设置,[href]并且只希望在项目href属性存在的情况下进行设置。否则,[attr.href]将添加一个值为'null'的href,当单击该href时将刷新当前页面。[attr.href]解决它。
dudewad

@dudewad对我来说听起来不正确。如果href在具有href属性的元素上进行设置,则无需使用attr。肯定还有其他地方出了问题。
君特Zöchbauer

@günter-zöchbauer好吧,我使用的是Ng 4.x,并且<a [href]="item.href">其中item.hrefundefined(不是undefined值,但该属性href不存在item)的href属性设置为null。我没有深入到源,因为老实说,我在这一点上(这是一个很小的细节)并不太在乎,但是attr.是不同的指令完全,因此作用不同也就不奇怪了我。
dudewad

37

在angular-2属性语法中,是

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

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

所以可以用像

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

9
这里的问题是,当your expressionfalse在DOM属性的样子<div checked="false">。我认为这不是预期的效果。
君特Zöchbauer

7
谢谢,但我问如何有条件地添加属性,而不是有条件地分配其值。
Jonathan Miles

您甚至可以省略“ attr”。字首。
Filip Stachowiak

1
@FilipStachowiak,那么它就不会成为属性。许多元素上都有各种属性,其中元素本身将绑定到属性的值反映到属性(以及另一个方向)。在这种情况下,您不需要attr.。但是,如果你想添加自定义属性,你肯定需要的attr.前缀
君特Zöchbauer

哦,伙计,这:null太神奇了,知道这可以在条件中使用!感谢您的解决方案。
pinarella

17

提炼GünterZöchbauer的答案:

现在似乎有所不同。我试图这样做,以便有条件地将href属性应用于锚标记。对于“不适用”情况,必须使用undefined。作为示例,我将通过有条件地应用href属性的链接进行演示。

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

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

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

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


5

如果是输入元素,则可以编写如下内容:... <input type="radio" [checked]="condition">condition的值必须为true或false。

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


4

你可以用这个

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


您用“ val”检查了属性值。如果为真,则返回真,否则返回假值
WapShivam

1

对于为现有的scss编写HTML的人,可以使用更好的方法。
html

[attr.role]="<boolean>"

脚本

[role = "true"] { ... }

这样,您就不必<boolean> ? true : null每次都这样。


这并非在所有情况下都有效。例如,它不适multiple用于selectelement的属性。
smartmouse


0

我想在下面的代码中添加特定字段的工具提示,但是您想要在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>

-7

内联地图也很方便。

它们也更加明确和易读。

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

如果您不喜欢三元语法或ngIfs(等),则这是完成同一件事的另一种方法。


1
一类是东西比一个属性完全不同的(问题是关于什么的)
君特Zöchbauer

1
您也可以尝试对问题做出正确的回答,然后我有理由重新考虑我的投票,我也可以投反对票而无需添加评论,以使您不愿接受投反对票的含义。
君特Zöchbauer

1
@Cody您可以解释(给出示例代码)您的方法如何与checked属性一起使用(从输入标签添加/删除输入标签) <input type="checkbox" name="vehicle" value="Car" checked>吗?(如果我们更改classcheckbox您的代码,则无法使用(我对此进行了检查))
KamilKiełczewski18年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.