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'}"

我收到以下错误，这使我感到困惑

解析器错误：缺少预期值：在[{totalrow：i％2！= 0，奇数：i％2 == 0，borderTopClass：运算符==='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

我想评论者需要对此进行更深入的解释。

"John","Doe 4","12344","moredata 3"
"John","Doe 7","12344","moredata 6"
"John","Do, or not","12345","moredata 2"
"John","Doe 5","12345","moredata 4"
"John","Doe 6","12345","moredata 5"
"John","Doe","12345","moredata 1"

当同时满足两个条件时，

<div [ngClass]="{ 'is-active': condition, 'is-inactive': !condition, 'multiple': condition && anotherCondition, }">类将适用。不仅一个，而且两个都有。

您可以像这样添加第三个：multiple

这是OP的StackBlitz，按他的预期工作，没有错误。如果我能帮助更多请愿，请告诉我。

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

1 个答案: