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

Question

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

早期版本的Angular有NgAttr，我认为NgChecked似乎都提供了我之后的功能。但是，这些属性似乎不存在于Angular 2中，我看不到提供此功能的其他方法。

Answer 1

null删除它：

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

或

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

Answer 2

angular-2属性语法中的

是

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

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

所以可以像

一样使用

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

Answer 3

提炼GünterZöchbauer答案：

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

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

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

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

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

Answer 4

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

还有样式属性...... <h4 [style.color]="'red'">Some text</h4>

Answer 5

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

[attr.role]="<boolean>"

scss

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

这样，您无需每次<boolean> ? true : null。

Answer 6

您可以使用它。

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

Answer 7

我只想为特定字段提供工具提示，仅在以下代码中添加，但您想在多重对象上使用工具提示，可以使用以下方法来作为数组valdidate：

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

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>

Answer 8

如果您正好需要 checked，最好使用属性而不是属性并为其分配一些布尔值：

<input type="checkbox" [checked]="smth">

如果你想有条件地添加任意属性，你可以使用绑定：

<p [attr.data-smth]="smth">

• 如果值为 undefined 或未添加 null 属性。
• 如果值为空字符串，则添加不带值的属性。
• 否则属性会被添加一个字符串化的值。

当然，您也可以将它与 attr.checked 一起使用：

<input type="checkbox" [attr.checked]="smth ? '' : null">

但请注意，在这种情况下，attr 与被检查不同步，因此以下组合

<input type="checkbox" [checked]="false" [attr.checked]="''">

将导致带有 checked 属性的复选框未选中。

还有一个完整的例子：

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <p [attr.data-smth]="e">The value is: {{what(e)}}</p>
    <p [attr.data-smth]="s">The value is: {{what(s)}}</p>
    <p [attr.data-smth]="u">The value is: {{what(u)}}</p>
    <p [attr.data-smth]="n">The value is: {{what(n)}}</p>
    <p [attr.data-smth]="t">The value is: {{what(t)}}</p>
    <p [attr.data-smth]="f">The value is: {{what(f)}}</p>

    <input type="checkbox" [checked]="t">
    <input type="checkbox" [checked]="f">

    <input type="checkbox" [attr.checked]="t ? '' : null">
    <input type="checkbox" [attr.checked]="f ? '' : null">

    <input type="checkbox" [checked]="false" [attr.checked]="''">
  `,
  styles: [`
    p[data-smth] {
      color: blue;
    }
  `]
})
export class AppComponent {
  e = ""
  s = "abc"
  u = undefined
  n = null
  t = true
  f = false

  what(x) {
    return typeof x === 'string' ? JSON.stringify(x) : x + ""
  }
}

结果如下：

<块引用>

和降价：

<块引用>

Answer 9

在这里，仅打印'isValid'为真/包含任何值

<p *ngIf="isValid ? true : false">Paragraph</p>

Answer 10

Inline-Maps也很方便。

他们更加明确＆amp;也是可读的。

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

如果您不喜欢三元语法或ngIf s（等），则只需另一种方法来完成同样的事情。