Angular 2 通过插值为 ngClass 添加值

Question

假设我在数组中有一些对象(我们称数组为“项目”)，例如 { title: "Title", value: true }我使用 ngFor 来显示它们:

<h1 *ngFor="let item of items">{{ item.title }}</h1>

现在假设我想根据 item.value 是真还是假在 h1 上显示一个类。我怎样才能做到这一点？

我无法添加 [class.some-class]="{{ item.value }}" .基本上，我怎样才能将当前项目的 true 或 false 值转换为 ngClass 之类的东西？我是否缺少在 Angular 2 中执行此操作的明显方法？

(顺便说一句，我知道我可以通过将 class="{{ item.value | pipe }}" 添加到 h1 并通过管道传递值并根据值 true 和 false 返回正确的类来实现，但似乎应该有更好的方法。)

谢谢

Answer 1

你可以像这样添加一个条件类:

<h1 *ngFor="let item of items" 
     [class.some-class]="item.value === true">
     {{ item.title }}
</h1>

请记住，*ngFor 语法实际上扩展为一个模板。在您的示例中，它将扩展为:

<template ngFor let-item [ngForOf]="items">
    <h1 [class.some-class]="item.value === true">
       {{ item.title }}
    </h1>       
</template>

当您看到它展开时，您就会明白为什么您能够将 [class.xyz] 指令与 item 的模板输入变量一起使用。