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

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


当前回答

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

具有自定义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>

其他回答

金特柴尔德解答

现在情况似乎有所不同。我试图这样做,有条件地应用一个href属性到一个锚标记。你必须使用undefined来表示“不适用”的情况。作为示例,我将演示一个有条件地应用href属性的链接。

——编辑 看起来angular改变了一些东西,所以null现在可以正常工作了。我将示例更新为使用null而不是undefined。

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

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

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

我认为这比在span和anchor标签上使用两个*ngIf更简洁。它还非常适合为按钮添加禁用属性。

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

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

你可以用这个。

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

对于为已经存在的scss编写HTML的人,可以使用更好的方法。 超文本标记语言

[attr.role]="<boolean>"

scss

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

这样你就不需要<boolean> ?True:每次都为空。

内联地图也很方便。

它们也更加明确和易读。

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

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