想要实现一个table中，根据数据不同而用不同颜色展示，比如：
审批表经过不同次数编辑保存后，审批表列表页对应行的字体颜色变化。如第一次保存默认为黑色，第二次保存为绿色，第三次保存为红色......（暂设置5层，5层后颜色不再变化）
首先要声明，由于我的table是封装起来的一个公共组件，也就是说我不得不将表格内容通过@Input()从我的使用的页面传到公共组件中，首先我们只有审批表这个列表需要控制数据显示不同颜色，所以我们先传一个参数用于判断当前显示的列表是否是审批表：
<!-- 审批表列表 -->
<app-ufast-table class="main-table" [tableConfig]="tableConfig"
[getListHandle]="getDataList"
[approveFormColor]="true" [dataList]="dataList">
</app-ufast-table>我们调用了封装组件<app-ufast-table>，用approveFormColor这个参数来告诉封装的组件我们当前是在审批表页！
那么相应的，我们在封装组件页面上，要接收这个参数——
@Input()
set approveFormColor(value: boolean) { // 审批表页
this.isApproveForm = value;
}这样我们首先知道了，当前我们要开始展示审批表了，接下来我们要在封装组件中，判断某一行是第几次被审批——这个字段我们用approveUpdateCount：
// 查询列表
this.approvalFormService.getApprovalFormList(filterData).subscribe((resData: ApprovalFormNs.UfastHttpResT<any>) => {
this.dataList = resData.value.list; // 获取列表数据
this.tableConfig.total = resData.value.total;
this.dataList.forEach((item) => {
if (item.approveUpdateCount === 0) { // 控制不同样式展示不同的颜色
item.itemStyleColor = 'black';
} else if (item.approveUpdateCount === 1) {
item.itemStyleColor = 'green';
} else if (item.approveUpdateCount === 2) {
item.itemStyleColor = 'red';
} else if (item.approveUpdateCount === 3) {
item.itemStyleColor = 'purple';
} else if (item.approveUpdateCount === 4) {
item.itemStyleColor = 'yellow';
} else if (item.approveUpdateCount >= 5) {
item.itemStyleColor = 'darkblue';
}
});注意：item.itemStyleColor = 'black';这里我们在从后台传入的每行数据中，都增加了一个控制当前数据颜色的参数，这个参数会随着上面的dataList一起传到封装的组件中，用于显示颜色——表格列的配置如下，每一列都用color接收了上面定义的颜色参数itemStyleColor：
headers: [
{ title: '操作', tdTemplate: this.operationTpl, width: 220, fixed: true },
{ title: '审批表编号', tdTemplate: this.approvalNoTpl, width: 150 },
{ title: '状态', field: 'status', width: 120, pipe: 'purchaseApprovalStatus', color: 'itemStyleColor' },
{ title: '采购方式', field: 'purchaseMethod', width: 120, pipe: 'purchaseWay', color: 'itemStyleColor' },
{ title: '物料类型', field: 'materialType', width: 120, pipe: 'materialType2', color: 'itemStyleColor' },
{ title: '供应商', field: 'supplier', width: 300, color: 'itemStyleColor' },
{ title: '创建人', field: 'creatorName', width: 100, color: 'itemStyleColor' },
{ title: '创建时间', field: 'createDate', width: 150, pipe: 'date:yyyy-MM-dd HH:mm:ss', color: 'itemStyleColor' },
]接下来我们在封装组件中，接收这个控制颜色的参数color，去改变每行数据的CSS：
<tr *ngFor="let row of tableData.data;trackBy:trackByTableBody;let rowIndex=index;"
[ngClass]="row[_tableConfig.trClassListField] || []">
<ng-container *ngFor="let head of _tableConfig.headers;trackBy:trackByTableHead;let
headIndex=index;">
<!-- isApproveForm是从使用的页面传进来的参数，表示当前列表是审批表 -->
<td *ngIf="head.show !== false &&!!isApproveForm" [ngClass]="head.tdClassList">
<ng-container *ngIf="head.tdTemplate;else rowTpl">
<ng-container
*ngTemplateOutlet="head.tdTemplate;context:row|context:rowIndex"></ng-
container>
</ng-container>
<ng-template #rowTpl>
<ng-container *ngIf="head.pipe">
<span [ngStyle]="{'color': row[head.color]}">
{
{row[head.field] | map:head.pipe}}
</span>
</ng-container>
<ng-container *ngIf="!head.pipe">
<span [ngStyle]="{'color': row[head.color]}">
{
{row[head.field]}}
</span>
</ng-container>
</ng-template>
</td>
</ng-container>
</tr>_tableConfig.headers存放的是列表的标题array，row是我们在页面上遍历出的table行数据。
这里我们用<ng-container>来展示重复的数据，也就是我们的每一行表格，其中我们将color从我们上面封装的每一行表格中抽出来，去控制行数据的style。
仔细看上面的写法，我们使用了span来包裹要展示的文本数据，[ngStyle]="{'color': row[head.color]}"这个写法很重要~
