Angular 我使用*ngFor在卡片布局中迭代元素。我想随机改变他们的背景颜色有什么办法吗？

下面是从远程服务器获取数据的HTML部分

 <div class="col-md-6 col-xl-4" *ngFor="let material of materials" >
    <div class="card widget-statstic-card"  >
      <div class="card-header">
        <div class="card-header-left">
          <h3 class="d-inline-block">{{material.Prd_Type}}</h3>
        </div>
      </div>
      <div class="card-block">
        <div class="text-left">
          <h3 class="d-inline-block">

          </h3>
        </div>
      </div>
    </div>
  </div>

---

我看不出您在循环中调用

getColor

的位置，如果循环是每次调用

getColor

的原因，您可以使用

trackBy

函数来避免意外的颜色更改

在模板文件中

<div class="col-md-6 col-xl-4" *ngFor="let material of materials; trackBy: trackByFn" >
...
</div>

---

我看不出您在循环中调用

getColor

的位置，如果循环是每次调用

getColor

的原因，您可以使用

trackBy

函数来避免意外的颜色更改

在模板文件中

<div class="col-md-6 col-xl-4" *ngFor="let material of materials; trackBy: trackByFn" >
...
</div>

---

您可以使用

[style.background]=“color”

设置背景色

{{material.Prd_Type}

---

这是一个很好的例子。

您可以使用

[style.background]=“color”

设置背景色

{{material.Prd_Type}

---

这是一个有效的例子。

假设每次获取数据时只希望颜色随机化，则应在该点进行随机化：

this.http.getMethod('ProductType/get').subscribe((data => {
  this.materials = data.map(material => {
    // assumes your data doesn't already have a "color" property
    material.color = this.colors[Math.floor(Math.random()*this.colors.length)]
    return material
  };
  console.log(this.materials);
}));

我不知道您在代码中实际在哪里设置背景色，但它看起来是这样的：

<div class="col-md-6 col-xl-4" *ngFor="let material of materials" [style.background]="material.color">

---

假设每次获取数据时只希望颜色随机化，则应在该点进行随机化：

this.http.getMethod('ProductType/get').subscribe((data => {
  this.materials = data.map(material => {
    // assumes your data doesn't already have a "color" property
    material.color = this.colors[Math.floor(Math.random()*this.colors.length)]
    return material
  };
  console.log(this.materials);
}));

我不知道您在代码中实际在哪里设置背景色，但它看起来是这样的：

<div class="col-md-6 col-xl-4" *ngFor="let material of materials" [style.background]="material.color">

---

在角度方面，您可以使用ngClass进行更好的渲染

ex:[ngClass]=“{'first'：true，'second'：true，'third'：false}”

根据条件，它将在css中调用该类

你可以试试这个来解决这个问题

例：

{{{item.client'client'：item.text}

ngClass中的任何查询请查看此链接

---

我希望它能以角度的方式工作，您可以使用ngClass进行更好的渲染

ex:[ngClass]=“{'first'：true，'second'：true，'third'：false}”

根据条件，它将在css中调用该类

你可以试试这个来解决这个问题

例：

{{{item.client'client'：item.text}

ngClass中的任何查询请查看此链接

我希望这能奏效

HTML

HTML

---

---

颜色应该在每次加载时随机一次，还是更频繁？另外，您实际在哪里设置背景色？你似乎并没有在任何地方使用随机值。你只使用了这三种颜色？两种颜色可以吗？默认情况下，ngFor提供奇数或偶数函数，您可以这样使用来更改背景颜色。现在颜色数组有七种颜色。颜色是否应在每次加载时随机分配一次，或者更频繁？此外，您实际在哪里设置背景色？你似乎并没有在任何地方使用随机值。你只使用了这三种颜色？两种颜色可以吗？默认情况下，ngFor提供奇数或偶数函数，您可以这样使用来更改背景颜色。现在颜色数组有七种颜色。其他我复制了您的代码，因为它在我的项目中，但颜色仍在不断变化。您可以为此创建一个stackblitz吗？您完全明白我的意思&您的代码工作正常。但是在我的项目中，代码和颜色一直在变化。你能和我分享stackblitz吗？兄弟，我复制了你的代码，就像在我的项目中一样，但颜色仍然在变化。你能为此创建一个stackblitz吗？你完全明白我的意思，你的代码工作得很好。但是在我的项目中，代码和颜色一直在变化，你能和我分享stackblitz吗？兄弟，没有条件，我必须每次显示用户随机背景兄弟，没有条件，我必须每次显示用户随机背景这应该是答案，这应该是答案

  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
      <p [ngClass]="{'first': item.client=='Client', 'second': item.text=='data'}">{{item.client ? 'Client' : item.text}}</p>
    </button>

 <div class="col-md-6 col-xl-4" *ngFor="let material of materials" >
    <div class="card widget-statstic-card"  [style.background]="getColor()">
      <div class="card-header">
        <div class="card-header-left">
          <h3 class="d-inline-block">{{material.Prd_Type}}</h3>
        </div>
      </div>
      <div class="card-block">
        <div class="text-left">
          <h3 class="d-inline-block">

          </h3>
        </div>
      </div>
    </div>
  </div>

colors=['red','blue','green'];

  materials: any;
  randomItem: string;

  constructor(public http: HttpService) {
    this.http.getMethod('ProductType/get').subscribe((data => {
      this.materials = data;
      console.log(this.materials);
    }));
  }

  getColor(){

     if (!this.randomItem) {
        this.randomItem = this.colors[Math.floor(Math.random()*this.colors.length)];
        console.log('s',this.randomItem);
     }
     return this.randomItem;
  }

  ngOnInit() {
    this.getColor();
  }