如何根据垫子表上的条件更改列中的数据 [英] How to change data in column based on condition on mat table

问题描述

我正在从rest api在mat表上显示数据，其中有一列"changeType"以数字形式显示数据.在这里，添加"显示为"4"，更新"显示为"1". 我想显示正确的词而不是数字，以使用户更容易理解.我该如何实现?

I am displaying data on mat table from rest api, In which there is a column "changeType" which displaying data in numeric form. Here it displaying "4" for "Add", and "1" for "Update". I want to display the proper word instead of number to make user more understandable. How can i achieve it?

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

推荐答案

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

You can do a function that take in input element.changeType and return the real value:

在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函数更好.

Obviously this is only an example you can make resolveEnum function better with switch case etc..

感谢@Drenai，从性能的角度来看，我提出了一个击球手解决方案.

Thanks to @Drenai I made a batter solution, from the performance point of view.

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

I made a resolEnum pipe so:

制作管道:

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

    constructor(private utility: UtilityService) { }

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

utilityService是其中具有resolveEnum函数的服务.

where utilityService is a service where there is resolveEnum function.

在html中:

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

这篇关于如何根据垫子表上的条件更改列中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！