想要实现一个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]}"这个写法很重要~