css - 向 ngClass 添加第三个条件不起作用

Question

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

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

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

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

我收到以下让我感到困惑的错误

Parser Error: Missing expected : at column 47 in [{ totalrow:i%2 != 0, odd: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>

感谢任何帮助。

Answer 1

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

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

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

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

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