Question

我正在使用Angular 6。

在其中一个HTML组件文件中，我想显示具有随机背景色的项目列表。

<span class="bg-{{ getRandomColor() }}">
     <i class="ion ion-ios-filing"></i>
</span>

并在组件文件中定义了getRandomColor()函数

export class DashboardComponent {

  constructor(
    private colorService: ColorService
  ) {
  }

  getRandomColor() {
    return this.colorService.getRandomColorClass();
  }
}

和 ColorClassService 就像

export class ColorService {

  private _colors = [
    'primary',
    'secondary',
    'warning',
    'success',
    'info',
    'danger'
  ];

  constructor() { }

  getRandomColor() {
    return this._colors[Math.floor(Math.random() * this._colors.length)];
  }
}

这很好，因为正在检索随机颜色。

但是，当鼠标移到页面上的任何元素上时，颜色正在改变，并且控制台中的错误类似于

ERROR Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 
Previous value: 'className: bg-primary'. Current value: 'className: bg-danger'."

Answer 1

这是一个更改检测问题，正如@Ingo在您的问题注释中指出的那样。

为进一步说明，将鼠标悬停在元素上时，Angular将运行更改检测周期。

由于它运行一个循环，因此会在上述元素上呈现一个新的CSS类，因为您使用了随机化器。

为避免这种情况，请使用onPush更改检测策略；或停止使用HTML模板中的函数，除非您监听事件（在这种情况下不这样做）。

将鼠标悬停在Angular中的任何元素上时，ExpressionChangedAfterItHasBeenCheckedError

1 个答案: