如何在 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中文网其他相关文章！