angular - 动态添加类到div

Question

我目前正在使用 Angular 2/4 开发一个网站。谁能告诉我如何使用 Angular 将类动态添加到 Div 元素。显然，我正在尝试向通过 *ngFor 显示的每个 div 背景添加随机引导 css 颜色类

//Component class
bgarray = ["bg-primary","bg-success","bg-danger","bg-warning","bg-warninig"];

getColour()
{
this.bgColour = this.bgarray[Math.floor(Math.random()*this.bgarray.length)];
return this.bgColour;
}

我尝试使用 [ngClass] 调用一个函数，该函数返回一个类作为“bg-danger”或“bg-warning”等。

<div class="bg-gray-lighter progress progress-xs">
<div class="progress-bar progress-xs " [style.width]="device.value" [ngClass]="getColour()" ></div>
 </div>

但随后会抛出错误 "expressionChangedAfterItHasBeenCheckedError"

能否请您告诉我是否有任何解决方法可以动态地为不同的进度条添加不同的背景颜色？

非常感谢。如果您能提供帮助，我们将不胜感激

下面是我想要实现的目标的先睹为快。

view them here

PS: Progress bar count may vary, below image contains 4 but it can reach 16 or more, 因此我想动态地为它们分配一种随机颜色。

Answer 1

问题的根本原因是您正在计算“随机”类，这与 Angular 的变更检测不兼容。

Angular 在设计上想要强制执行单向数据流。这意味着模板绑定(bind)表达式不能改变模型。为了检查这一点，Angular 在开发时控制 View 在渲染后不会改变，这是通过第二次运行渲染逻辑并检查这是否与渲染引擎第一次生成的完全相同来完成的.

现在，如果您有一个包含一些“随机生成逻辑”的绑定(bind)表达式，那么第二次渲染产生的结果很可能与第一次运行渲染引擎时产生的结果不同。这就是您收到 expressionChangedAfterItHasBeenCheckedError 错误的原因。

这些链接很好地解释了 Angular 中的单向数据流机制:http://blog.angular-university.io/angular-2-what-is-unidirectional-data-flow-development-mode/ http://blog.angular-university.io/angular-2-redux-ngrx-rxjs/

如果你想为你的 div 分配随机类，那么在 ngOnInit() 方法中你可以创建一个数组并推送与你的 div 一样多的随机类。您可以使用此数组来设置类。