为什么 Angular 中的'*ngClass”会抛出'无法读取未定义的属性'删除'”错误？

Angular 中带有 *ngClass 的条件类

Angular 提供了各种选项来有条件地将 CSS 类应用到 HTML 元素。一种常见的方法是使用 *ngClass 指令。但是，如果使用不当，可能会导致错误，例如“无法读取未定义的属性‘删除’。”

问题：

鉴于下面的 Angular 代码，为什么出现以下错误发生：

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass

<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 版本 2 中使用带有条件表达式的 ngClass 指令而发生错误。在 Angular 2 中， ngClass 指令接受一个对象作为参数，其中键代表 CSS 类名称，值代表布尔表达式。

要解决此问题，请将 *ngClass 指令替换为以下任意值Angular 提供了以下方法：

Type一：

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

二类：

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

三类：

[ngClass]="{1: 'active', 2: 'step2', 3: 'step3'}[step]"

类型四：

[ngClass]="step === 'step1' ? 'active' : 'inactive'"

对于多类条件，您可以使用对象表示法，如类型二所示。有关使用 *ngClass 的更多详细信息，请参阅 Angular 文档。

以上是为什么 Angular 中的'*ngClass”会抛出'无法读取未定义的属性'删除'”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！