Angular 2通过插值将值添加到ngClass

Question

可以说我在数组中有一些对象（我们称其为数组“ items”），{ title: "Title", value: true }并且我使用ngFor将它们显示为：

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

现在说我想根据item.value是true还是false在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。在您的示例中，它将扩展为：

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

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

Answer 2

将 ngClass 用于动态值（其中 dynamicValue 可以是组件内的 @Input()）：

<div [ngClass]="[dynamicValue]"></div>

也可用于多个值：

<div [ngClass]="[dynamicValue, secondDynamicValue, thirdDynamicValue]"></div>

在某些情况下，您可能希望将动态值与条件类组合。这可以像这样完成：

<div [ngClass]="[dynamicValue, (isRounded ? 'rounded' : '')]"></div>

这将应用动态值类名称，并且在 isRounded 为 true 的情况下还将有条件地应用“rounded”类。