Angular 2通过插值为ngClass添加值

Question

假设我在数组中有一些对象（让我们调用数组＆＃34; items＆＃34;），如{ title: "Title", value: true }，我使用ngFor来显示它们：

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

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

我无法添加[class.some-class]="{{ item.value }}"。基本上，我如何才能将当前项的真值或假值变为类似于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>

这将应用动态值类名称，并且还有条件地应用＆＃39;舍入＆＃39;如果是圆形的类是真的。

Answer 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)"

另见

• Template Syntax: NgClass

Answer 4

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

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

Answer 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;
}