如何在 Angular 中正確使用 ngClass 進行條件樣式？

Angular 中帶有 *ngClass 的條件類別

Angular 應用程式中的常見要求之一是根據某些條件有條件地應用類別。 ngClass 指令提供了一種便捷的方法來實現此目的。

遇到的問題

以特定方式使用 ngClass 時，您可能會遇到類似「無法讀取未定義的屬性 'remove'」 的錯誤。此錯誤表示指令的使用不正確。

Angular 2 中ngClass 的正確用法

Angular 2 及更高版本提供了幾種應用條件類的選項：

選項1:

[class.my_class] = "step === 'step1'"

僅當'step' 變數等於 'step1' 時，此語法才會加入 'my_class' 類別。

選項 2:

[ngClass] = "{'my_class': step === 'step1'}"

此選項使用物件文字來指定條件和對應的類別

選項3：

[ngClass] = "{'1' : 'my_class1', '2' : 'my_class2', '3' : 'my_class4'}[step]"

此方法利用雜湊查找根據「step」變數的值應用適當的類別。

選項4:

[ngClass] = "step == 'step1' ? 'my_class1' : 'my_class2'"

此語法使用三元運算子根據「step」變數有條件地設定類別。

範例

在您的程式碼中，您使用 ngClass={active: step==='step1'} 表示，這不是正確的語法。相反，請使用上述選項之一。例如：

<ol>
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

採用這些替代方法之一應該可以解決您遇到的錯誤。請參閱 Angular 文件以了解更多詳細資訊。

以上是如何在 Angular 中正確使用 ngClass 進行條件樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！