角2附加价值ngClass与插补

可以说我有一个数组一些对象（让我们称之为数组“项目”）像{ title: "Title", value: true }我用ngFor显示他们喜欢：角2附加价值ngClass与插补

<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正确的类做到这一点，但它似乎应该有一个更好的办法。）

感谢

来源

2016-09-15 user5021816

为什么你不能用'[class.some级]'？它说了什么错误？ –

您可以添加一个条件类是这样的：

<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的模板输入变量。

来源

2016-09-15 00:39:51 WiredPrairie

我最初尝试过，但没有工作，所以我认为我做不到。原来我只是拼错了一些东西。看起来我需要休息一下。谢谢！ – user5021816

@ user5021816 - 如果这有帮助，请考虑投票并接受答案。谢谢！ – WiredPrairie

你不应该插入它。请忽略{{}}。这会将它插入到一个字符串中。离开那些出会给你布尔值，这是完全合法[class.some-class]

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

其他选项

您还可以使用对象符号串接或者从组件中取出，如果你有几个不同的类别。基本上，属性是css类，该值是真/假

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

或者从组件获取对象

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

[ngClass]="getClasses(value)"

请参见

Template Syntax: NgClass

来源

2016-09-15 00:41:22

你可以我terate并在h1标签中使用ngClass。

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

来源

2016-09-15 01:37:38 ranjeet8082

如果要直接使用item.value。是一个布尔值。用途：

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

如果您需要评估直接返回一个布尔值，而不是一个布尔值的函数。例如，以评估值是否为您所需的字符串：

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

之中：

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

来源

2017-04-13 06:36:21 Sam

它不工作。 – Madhab452

角2附加价值ngClass与插补

回答

相关问题