如何根据mat表上的条件更改列中的数据

Question

我正在从rest api 在mat 表上显示数据，其中有一列“changeType”，以数字形式显示数据。此处显示“4”表示“添加”，“1”表示“更新”。我想显示正确的单词而不是数字以使用户更容易理解。我怎样才能实现它？

<ng-container matColumnDef="changeType">
       <th mat-header-cell *matHeaderCellDef> Change Type </th>
       <td mat-cell *matCellDef="let element"> {{element.changeType}} </td>
</ng-container>

Answer 1

您可以执行一个接受输入 element.changeType 并返回实际值的函数：

在html中：

<ng-container matColumnDef="changeType">
       <th mat-header-cell *matHeaderCellDef> Change Type </th>
       <td mat-cell *matCellDef="let element"> {{resolveEnum(element.changeType)}} </td>
</ng-container>

在 .ts 中

resolveEnum(num: number) {
  if(num == 1) 
   return "Update"
 else if(.....)
  .....
}

显然这只是一个示例，您可以使用 switch case 等使resolveEnum 函数更好。

编辑：

感谢@Drenai，从性能的角度来看，我做了一个更好的解决方案。

我做了一个 resolEnum管道，所以：

制作管道：

@Pipe({
    name: 'resolveEnum'
})
export class ResolveEnum implements PipeTransform {

    constructor(private utility: UtilityService) { }

    transform(value: number): string {
        return this.utility.resolveEnum(value);
    }
}

其中utilityService是一个有resolveEnum函数的服务。

在 HTML 中：

<ng-container matColumnDef="changeType">
       <th mat-header-cell *matHeaderCellDef> Change Type </th>
       <td mat-cell *matCellDef="let element"> {{element | resolveEnum}} </td>
</ng-container>