向 ngClass 添加第三个条件不起作用答案

【问题标题】：Adding 3rd condition to ngClass is not working向 ngClass 添加第三个条件不起作用
【发布时间】：2019-10-29 08:49:28
【问题描述】：

我正在尝试向我的 ngClass 添加第三个条件。起初，我让以下两个类在我的 ngClass 中工作以交替行的颜色

[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0}"

我正在尝试添加第三类和条件，其中 mat-list 将显示 mat-list-item 顶部的边框线。但是，当我添加第三个条件时，它给了我一个错误

[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}"

我收到以下令我困惑的错误

解析器错误：缺少预期：在 [{ totalrow:i%2 != 0 中的第 47 列，奇数：i%2 == 0，borderTopClass : operator === 'fas fa-equals'}] in

这是带有 ngFor 的代码

<div class="ng-container" *ngFor="let operator of operatorList; let i = index">
    <mat-list-item 
        fxLayoutAlign="start" 
        style="padding-left: 0px; padding-right: 0px;" 
        [ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass   : operator === 'fas fa-equals'}">
            <i class="{{operator}}"></i>
    </mat-list-item>
</div>

感谢任何帮助。

【问题讨论】：

我无法重现您提到的错误。也许这可能是一个错字/格式问题。但是为您提供您想要实现的代码的工作版本以防万一：codesandbox.io/s/angular-uydqp

标签： css angular

【解决方案1】：

我想评论者需要更深入地解释这是如何工作的。

<div [ngClass]="{
  'is-active': condition,
  'is-inactive': !condition,
  'multiple': condition && anotherCondition,
}">

multiple 类将在两个条件都满足时应用。不只是一个，而是两个。

您可以像这样添加第三个：'multiple': condition && anotherCondition && thirdCondition

这是 OP 代码的StackBlitz，它按预期工作且没有错误。如果我能提供更多帮助，请告诉我。

【讨论】：