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

Question

下面是从远程服务器获取数据的 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>

这是我给出的 TS 函数，该函数 returns 颜色来自 ts 中定义的颜色数组。这里的问题是 *ngFor 循环不断重复，所有颜色都在变化，我不希望它们再次变化。

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(){
     this.randomItem = this.colors[Math.floor(Math.random()*this.colors.length)];
     console.log('s',this.randomItem);
     return this.randomItem;
  }

  ngOnInit() {
    this.getColor();
  }

Answer 1

我看不到你在循环中调用 getColor 的位置，如果循环是导致每次调用 getColor 的原因，你可以使用 trackBy 功能，以避免颜色意外改变。

在您的模板文件中

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

然后，在您的 ts 文件中，添加一个函数 trackByFn 或您喜欢的任何名称

trackByFn(index, material) {
  return index; // or material.id
}

Answer 2

您可以使用 [style.background]="color";

设置背景颜色

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

here 是一个工作示例。

Answer 3

假设您只想在每次获取数据时随机化颜色，您应该在此时进行随机化：

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">

Answer 4

在angular方式下，可以使用ngClass来更好的渲染。

ex: [ngClass]="{'first': true, 'second': true, 'third': false}"

根据条件它将调用 css 中的 class。

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

例如：

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

ngClass 中的任何查询请检查此 link https://angular.io/api/common/NgClass

我希望它能奏效

Answer 5

HTML

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

TypeScript

只给randomItem赋值一次

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

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

I am using *ngFor to iterate element in a card layout. I want to randomly change their background color Is there any way?

typescript

ngfor

angular

angular6