将类动态添加到 div答案

【问题标题】：Dynamically add class to div将类动态添加到 div
【发布时间】：2017-10-23 03:12:16
【问题描述】：

我目前正在使用 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：进度条数量可能会有所不同，下图包含 4 个，但将来可能会达到 16 个或更多，因此我想为它们动态分配随机颜色。

【问题讨论】：

不要绑定到方法，而是将值分配给字段并绑定到该字段。

标签： angular ng-class

【解决方案1】：

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

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

现在，如果您有一个包含一些“随机生成逻辑”的绑定表达式，则很可能第二次渲染产生的结果与渲染引擎第一次运行产生的结果不同。这就是您收到 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 一样多的随机类。你可以使用这个数组来设置类。

【讨论】：

谢谢，是的，我会做很多研究。

【解决方案2】：

试试这个。

在 HTML 中

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

在 TypeScript 文件中。

public getColour(): any {
        let style: any = null;
        style = {
            'background-color': this.bgarray[Math.floor(Math.random()*this.bgarray.length)]
        }
        return style;
    }

【讨论】：

非常感谢您的代码，不幸的是，它不起作用 karan..但我使用模数以这种方式工作。
只是一个不......在模板中计算时可能会影响性能...... [ngStyle]="getColour()"

【解决方案3】：

不要忘记直接DOM 操作。
大多数时候，Angular 会为您执行此操作，但您应该注意。

这是一个交互式示例： https://plnkr.co/edit/igHxH7I2EJ7HTAN3ymOY?p=preview

代码预览：

  // My stuff
  activeBg;
  bgarray     = ["bg-primary", "bg-success", "bg-danger", "bg-warning", "bg-error"];

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


  updateProgressBtnBg(){
    //debugger;

    // Regular DOM
    let myProgressBar = document.querySelector(".progress-bar");

    if( !this.activeBg ){
      let newRandomBg = this.getRandomBg();
      myProgressBar.classList.add(newRandomBg);
      this.activeBg   = newRandomBg;
    } else {
      let newRandomBg = this.getRandomBg();
      myProgressBar.classList.remove(this.activeBg);
      this.activeBg   = newRandomBg;
      myProgressBar.classList.add(this.activeBg); 
    }

  }


  onMyButtonClick(){
    this.updateProgressBtnBg();
    alert("Random background performed from: onMyButtonClick() ");
  }


  ngOnInit() {
    this.updateProgressBtnBg();
    alert("Random background performed from: ngOnInit() ");
  }

【讨论】：

【解决方案4】：

我不确定这是否可行。不过你可以试一试。

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


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;
}

【讨论】：