如果你需要精确检查，最好使用property而不是attribute，并为它分配一些布尔值:

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

如果你想有条件地添加任意属性，你可以使用binding对它:

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

如果该值为undefined或未添加null属性。 如果值为空字符串，则添加属性时不带值。 否则，属性将使用字符串化值添加。

当然，您可以将它与attr一起使用。检查:

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

但请注意，在这种情况下，attr与被检查是不同步的，所以下面的组合

<input type="checkbox" [checked]="false" [attr.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 + ""
  }
}

这就是结果:

标记:

你可以用这个。

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

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

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

内联地图也很方便。

它们也更加明确和易读。

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

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

如果你需要精确检查，最好使用property而不是attribute，并为它分配一些布尔值:

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

如果你想有条件地添加任意属性，你可以使用binding对它:

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

如果该值为undefined或未添加null属性。 如果值为空字符串，则添加属性时不带值。 否则，属性将使用字符串化值添加。

当然，您可以将它与attr一起使用。检查:

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

但请注意，在这种情况下，attr与被检查是不同步的，所以下面的组合

<input type="checkbox" [checked]="false" [attr.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 + ""
  }
}

这就是结果:

标记:

在angular-2属性语法中是

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

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

所以可以用like

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