Question

喜我有这张离子卡，我想系统地改变他的背景，例如卡1的细节，他将采取卡2的颜色红色细节，他将采取颜色绿色，直到... N 如何做到这一点，并提前感谢

<ion-card *ngFor="let t of allpro">
  <ion-card-content>
    <ion-card-title>
      {{t.name}}
    </ion-card-title>
  </ion-card-content>

Answer 1

在.ts中需要包含以下功能

  getRandomColor()
  {
      var color = "#";
      for (var i = 0; i < 3; i++)
      {
          var part = Math.round(Math.random() * 255).toString(16);
          color += (part.length > 1) ? part : "0" + part;
      }
      return color;
  }

需要更改.html

<ion-card *ngFor="let t of allpro">
  <ion-card-content [ngStyle]="{'bacground':getRandomColor()}">
    <ion-card-title>
      {{t.name}}
    </ion-card-title>
  </ion-card-content>
</ion-card>

如何系统地改变离子卡的背景颜色

1 个答案: