Angular 2 通过插值向 ngClass 添加值答案

【问题标题】：Angular 2 add value to ngClass with interpolationAngular 2 通过插值向 ngClass 添加值
【发布时间】：2016-09-15 00:21:06
【问题描述】：

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

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

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

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

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

谢谢

【问题讨论】：

【解决方案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 的模板输入变量一起使用。

【讨论】：

【解决方案2】：

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

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

也可以用于多个值：

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

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

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

这将应用动态值类名称，并且如果 isRounded 为真，还将有条件地应用“舍入”类。

【讨论】：

【解决方案3】：

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

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

其他选项

如果您有几个不同的类，您还可以使用内联或取自组件的对象表示法。基本上属性是css类，值是true/false

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

或者从组件中获取对象

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

[ngClass]="getClasses(value)"

另见

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

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

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

存在：

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

【讨论】：