Question

在[ngClass]上添加多个条件无效

a.component.html

 <div class="version-content" *ngFor="let version of versions; let lastVersion = last" [ngClass]="(version.isComingSoon === true) ? 'dashed': 'solid'">
            <div class="bubble" [ngClass]="endBubble : lastVersion, (version.isComingSoon === true) ? 'round': 'filled'">
</div>
 
        </div>

下面的代码不起作用

<div class="bubble" [ngClass]="endBubble : lastVersion, (version.isComingSoon === true) ? 'round': 'filled'">
    </div>

Answer 1

文档显示=>

https://angular.io/api/common/NgClass

这些是使用ngClass =>

的方法

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

所以它将是数组版本，或者您也可以使用对象版本。

<div class="bubble" [ngClass]="[lastVersion ? 'endBubble' : '', (version.isComingSoon === true) ? 'round': 'filled']">

Answer 2

您正在混合两种不同类型的支票。您可以使用@Crocsx所示的相同类型的检查，也可以将它们分成两个单独的绑定。尝试以下

<div class="bubble" [class.endBubble]="lastVersion" [ngClass]="version.isComingSoon ? 'round': 'filled'">
</div>

Angular ngClass在添加多个条件时不起作用

2 个答案: