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

以前版本的Angular有NgAttr和NgChecked,它们似乎都提供了我想要的功能。然而,这些属性在Angular 2中似乎不存在,而且我也找不到其他方法来提供这个功能。


当前回答

在angular-2属性语法中是

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

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

所以可以用like

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

其他回答

Null删除它:

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

or

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

提示:

属性与属性

当你添加这个绑定的HTML元素没有绑定中使用的属性名(在这种情况下勾选),并且没有Angular组件或指令应用到选中@Input()的同一个元素,那么[xxx]="…"不能被使用。

参见HTML中的属性和属性之间的区别是什么?

如果没有这样的属性,还绑定什么呢

其他选项有[style.xxx]="…",[attr.xxx]="…",[class.xxx]="…",这取决于你想要完成什么。

因为<input>只有一个checked属性,而没有checked属性[attr.checked]="…"对于这种特定的情况是正确的方式。

属性只能处理字符串值

一个常见的陷阱是,对于[attr.xxx]="…"绑定,值(…)总是被字符串化。只有属性和@Input()s可以接收其他值类型,如boolean, number, object,…

元素的大多数属性和属性是相互关联的,并且具有相同的名称。

Property-attribute连接

当绑定到属性时,属性也只接收来自属性的字符串化值。 当绑定到属性时,属性接收绑定到它的值(布尔值,数字,对象,…),属性再次接收字符串化的值。

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

在angular 2.0模板中添加for属性时出错 https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor(请参阅描述的第一句话htmlFor属性反映了for的值- for可能不起作用,因为它是C或JavaScript中的关键字) 为什么colspan在Angular 2中不是已知的原生属性?

Angular从那时起就改变了,它知道这些特殊情况并处理它们,这样你就可以绑定到<label [for]=",即使不存在这样的属性(colspan也一样)。

如果它是一个输入元素,您可以编写类似....的内容 <input type="radio" [checked]="condition"> condition必须为true或false。

还有样式属性… < h4(风格。color] = "红”< / h4 > >一些文本

在angular-2属性语法中是

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

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

所以可以用like

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

我想有工具提示只为一个特定的字段添加如下代码,但你想有工具提示在多,你可以有一个数组验证使用:

具有自定义data-tooltip属性的多个元素:

1:包括(键)

2: ['key1ToHaveTooltip', 'key2ToHaveTooltip'].indexOf(key) > -1

在多个元素上有工具提示属性。

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>

内联地图也很方便。

它们也更加明确和易读。

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

只是完成同样的事情的另一种方式,以防你不喜欢三元语法或ngif(等)。