css - 如何在简单条件和三元条件下使用 [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>