如何在简单条件和三元条件下使用[ngClass]？

Question

我有一系列代表步骤的标签。如此处所示，如果第一步是当前步骤，则应用step-active类。

<a (click)="goStep2" [ngClass]="{'step-active': currentStep === 1 }">
 Step 1
</a>

现在，我还要添加另一个与页面包含有关的条件。用户已回答所有必需的问题。如果步骤有效，我想以绿色突出显示该步骤，否则以红色突出显示。

<a (click)="goStep2" [ngClass]="{'step-active': currentStep === 1,
    isValid ? 'valid-state' : 'invalid-state' }">
 Step 1
</a>

我收到有关丢失:的错误消息。考虑到第一个条件只是简单条件，而第二个条件是三元条件，如何应用这两个条件。

感谢您的帮助

Answer 1

<a (click)="goStep2" [ngClass]="{'step-active': currentStep === 1,
    'valid-state' : isValid, 'invalid-state': !isValid }">
 Step 1
</a>