Question

在我的组件中，我将随机颜色应用于多个按钮。颜色成功应用，但以下错误在控制台上显示我。

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'background-color: #85B228'. Current value: 'background-color: #505563'.

这是我的代码：

getRandomColor2() {
    var length = 6;
    var chars = '0123456789ABCDEF';
    var hex = '#';
    while(length--) hex += chars[(Math.random() * 16) | 0];
    return hex;
  }
<button type="button" class="btn" style="color:black" [ngStyle]="{'background-color': getRandomColor2()}"

Answer 1

您可以使用变更检测机制。变更检测将获取对象，数组的内部状态，并使其以某种方式对用户界面可见。

您可以在执行逻辑后在getRandomColor2（）中使用它，

例如，

getRandomColor2({
    //do your logic here
    this.changeDetecionRef.detectChanges();
}

Answer 2

在您的ts代码中执行以下操作：

class XComponent {
    randomColor2 = getRandomColor2();
    //...
}

然后在您的html模板中使用如下值：

[ngStyle]="{'background-color': randomColor2}"

在创建组件时，颜色只会被随机选择一次。

如何解决将随机颜色应用于按钮Angular 2时的错误

2 个答案: