angular6中截图中的每张卡片如何设置随机颜色？

Question

[![在此处输入图片描述][1]][1]

这是component.html-

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-12">
    <a href="javascript:void(0)" (click)="openModal()">
      <div class="card card-box HYT " style="border: 1px dashed #3987d9;">
        <div class="card-body ">
          <div class="vimg rect-0">
            <h4 class="KLIU"> <i class="fa fa-plus" aria-hidden="true"></i> Create New</h4>
          </div>
        </div>
      </div>
    </a>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-12"  
    *ngFor="let rlist of appList | search : query | paginate: { itemsPerPage:10 , currentPage: p }; let i = index;">
    <a href="javascript:void(0)" >
      <div class="card card-box HYT ">
        <div class="card-body ">
          <div [class]='"vimg rect-"+(i+1)'>
            <h4 class="HTRE"><img [src]="rlist?.attributes?.applogo" width="100%"></h4>
          </div>
          <span class="PKU">{{rlist?.attributes?.appname}}</span><br>
          <span class="KHUY">Create-On: {{rlist?.createdAt |date: 'EEE, dd-MMM-yyyy'}}</span>
          <i class="fa fa-edit" (click)="editModal(rlist?.id)"></i>&nbsp;
          <i class="fa fa-trash" (click)="deleteApp(rlist.id)"></i>&nbsp;
        </div>
      </div>
    </a>
  </div>
  <div class="col-12" *ngIf="appList.length>0">
    <ul class="pagination" style="padding-top:25px; margin-left: 35%;">
      <pagination-controls (pageChange)="p = $event"></pagination-controls>
    </ul>
  </div>
</div>

这是component.ts-

async getApps() {

    const AppInfoData = Parse.Object.extend('w_appinfo');
    // To create a new subclass, use the Parse.Object.extend method
    const query = new Parse.Query(AppInfoData);
    // Parse.Query offers different ways to retrieve a list of objects rather than just a single object.
    this.appList = [];

    this.appList = await query.descending("updatedAt").find().then(function (result) {
      return result;
    }, (error) => {
      // The object was not retrieved successfully.
      this.toastr.error(error.message, 'Error!!!');
    });

  }

在给定的屏幕截图中，我手动将颜色应用于应用列表。每当单击 'create new' 按钮时，我想为每张卡片设置随机颜色。请帮我解决这个问题。

Answer 1

这样试试：

Working Demo

.ts

  addColor() {
    this.appList.forEach(item => {
       item.color = '#' + Math.floor(Math.random()*16777215).toString(16)
    });
  }

.html

<div class="card-body " [style.background-color]="rlist.color">
   ...
</div>

Answer 2

你可以 NgStyle

在需要随机更改颜色的地方添加此代码

[ngStyle]="{'color': getRandomColor()}"

并实现 getRandomColor() 方法如下

getRandomColor() {
    var color = Math.floor(0x1000000 * Math.random()).toString(16);
    return '#' + ('000000' + color).slice(-6);
  }

stackBlits example 随机颜色生成

希望这会有所帮助...！

angular6中截图中的每张卡片如何设置随机颜色？

How to set random color to each card shown in screenshot in angular 6?

typescript

parse-server

angular