Angular 2通过插值为ngClass添加值

发布时间：2020-12-17 17:22:20 所属栏目：安全来源：网络整理

导读：假设我在数组中有一些对象(让我们调用数组“items”),如{title：“Title”,value：true},我使用ngFor来显示它们： h1 * ngFor =“让项目项目” {{item.title}} / h1 现在假设我想根据item.value是true还是false来显示h1上的类. 我怎样才能做到这一点？我无

假设我在数组中有一些对象(让我们调用数组“items”),如{title：“Title”,value：true},我使用ngFor来显示它们：

< h1 * ngFor =“让项目项目”> {{item.title}}< / h1>

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

我无法添加[class.some-class] =“{{item.value}}”.基本上,我如何才能将当前项的真值或假值变为类似于ngClass的值？我在Angular 2中错过了一个明显的方法吗？

(顺便说一句,我知道我可以通过将class =“{{item.value | pipe}}”添加到h1并管理值并根据值true和false返回正确的类来实现,但似乎应该是一个更好的方式.)

谢谢

解决方法

您可以添加如下条件类：

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

请记住,* ngFor语法实际上扩展为模板.在您的示例中,它将扩展为：

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

当您看到它展开时,您可以看到为什么您能够将[class.xyz]指令与该项的模板输入变量一起使用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!