如何为角6中屏幕截图中显示的每张卡设置随机颜色

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>

这是组件.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!!!');
});
}

在给定的屏幕截图中，我手动将颜色应用于应用程序。每当点击"新建"按钮时，我想为每张卡片设置随机颜色。请帮我解决这个问题。

Answer 1

这样尝试：

工作演示

.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()}"

并按照实现CCD_ 1方法

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

stackBlits示例随机颜色生成

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