Angular 2 通过插值向 ngClass 添加值

Question

假设我在数组中有一些对象（我们称数组为 "items"），例如 { title: "Title", value: true }，我使用 ngFor 来显示它们，例如：

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

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

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

（顺便说一句，我知道我可以通过将 class="{{ item.value | pipe }}" 添加到 h1 并通过管道传输值并根据值 true 和 false 返回正确的 class 来做到这一点，但它似乎在那里应该是更好的方法。）

谢谢

Answer 1

您可以像这样添加条件 class：

<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

你不应该插入它。只需省略 {{}}。这会将它插入到一个字符串中。将它们排除在外将为您提供布尔值，这对 [class.some-class]

完全有效

[class.some-class]="item.value"

其他选项

如果您有一些不同的 classes，您也可以使用内联或从组件中获取的对象表示法。基本上属性是 css class，值是 true/false

[ngClass]="{'some-class': item.value }"

或者从组件中获取对象

getClasses(value) {
  return { 'some-class': value }
}

[ngClass]="getClasses(value)"

另请参阅

Answer 3

您可以在 h1 标签中迭代和使用 ngClass。

<h1 *ngFor="let item of items" [ngClass]="{'cssClass': item.value }">{{ item.title }}</h1>

Answer 4

如果想直接使用item.value。作为一个布尔值。使用：

[ngClass.class-you-want-add] = "item.value === true"

如果您希望评估一个 returns 布尔值而不是直接布尔值的函数。例如评估值是否是您想要的字符串：

[ngClass] = "{'class-you-want-add' : isValue("OneValue")}"

存在：

isValue(val:string) {
   return this.item.value == val;
}

Answer 5

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

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

也可用于多个值：

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

在某些情况下，您可能希望将动态值与条件 class 结合使用。可以这样做：

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

这将应用动态值 class 名称，如果 isRounded 为真，还将有条件地应用 'rounded' class。

Angular 2 add value to ngClass with interpolation