在ionic 3和Angular 4中使用的文本中的随机颜色生成器

Question

home.html

创建卡并访问json以获取值和数据

<ion-card *ngFor="let shayari of shayar_list">
    <div class="card-title" [ngStyle]="{'color':shayari.color{{shayari.title}}</div>
</ion-card>

.ts

创建一个json并访问math.random函数调用

this.shayar_list = [{
  title: 'Love Shayari',
  color : this.getRandomColor(),
]}

创建一个随机的颜色生成器功能

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

Answer 1

  shayar_list = [];
  constructor(public navCtrl: NavController) {
    this.shayar_list = [{
      title: 'Love Shayari',
      color : this.getRandomColor(),
    }];
  }

and function

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

and template

  <ion-card *ngFor="let shayari of shayar_list">
      <div class="card-title" [ngStyle]="{'color':shayari.color}">
        {{shayari.title}}
      </div>
  </ion-card>