Как изменить данные в столбце на основе условия таблицы матов

Question

Я отображаю данные в таблице mat из rest api, в которой есть столбец "changeType", который отображает данные в числовой форме c. Здесь отображается «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(.....)
  .....
}

Очевидно, что это всего лишь пример того, как можно улучшить функцию resolEnum с помощью регистра переключателя и т. Д. c ..

РЕДАКТИРОВАТЬ:

Благодаря @Drenai я сделал решение для теста, с точки зрения производительности.

Я сделал resolEnum pipe так:

Make the pipe:

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

    constructor(private utility: UtilityService) { }

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

где utilityService - это сервис, в котором есть функция resolEnum.

In html:

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