Question

目前正在使用Angular 2/4开发网站。任何人都可以让我知道如何使用Angular动态地将一个类添加到Div元素。显然，我试图将随机bootstrap css颜色类添加到通过* ngFor

显示的每个div背景

//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]调用一个函数，该函数返回一个单独的类作为＆＃34; bg-danger＆＃34;或＆＃34; bg-warning＆＃34;等。

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

但是它会抛出错误＆＃34; expressionChangedAfterItHasBeenCheckedError＆＃34;

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

非常感谢。如果你能提供帮助，那就非常值得注意了

在这里，我想看看我想要实现的目标。

view them here

PS：进度条数可能会变化，下面的图像包含4但未来可以达到16或更多，因此我想为它们动态分配颜色。

Answer 1

问题的根本原因在于你正在计算＆＃34;随机＆＃34;该类，这与Angular的变化检测不兼容。

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

现在，如果你有一个绑定表达式，其中包含一些＆＃34;随机生成逻辑＆＃34;很可能第二次渲染产生的结果与第一次渲染引擎期间产生的结果不同。这就是为什么你得到 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一样多的随机类。您可以使用此数组来设置类。

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

Answer 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() ");
  }

Answer 4

我不确定这会有效。但你可以尝试一下。

overflow: auto;
max-height: 386px;

动态地将类添加到div

4 个答案: