时间戳

首页 > 解决方案 > 向 ngClass 添加第三个条件不起作用

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

问题描述

我正在尝试向我的 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,odd:i%2 == 0,borderTopClass : operator === 'fas fa-equals'}] 中的第 47 列

这是 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>

任何帮助表示赞赏。

标签： cssangular

解决方案

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

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

multiple当两个条件都满足时，课程将适用。不只是一个，而是两个。

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

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

推荐阅读