Как правильно редактировать значения, отображаемые в сетке?

Question

Это определенно будет простой вопрос.

     {
    headerName: 'Name',
    field: 'name',
    sortable: false,
    lockPosition: true,
    resizable: true
  },
  {
    headerName: 'isShopOpen',
    field: 'isShopOpen',
    sortable: false,
    lockPosition: true,
    resizable: true
  }

У меня есть этот пример таблицы, и я хотел бы знать, как лучше всего показать "Закрыто", если isShopOpen == = 1, «Открыто», если isShopOpen === 2, «Временно закрыто» - это isShopOpen === 3.

Заранее всем спасибо.

Answer 1

Демо Один способ - это пользовательская труба

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
   name: 'header',
   pure: false
})
export class PersonelFilterPipe implements PipeTransform {
  transform(param: any): any { 
     if(param==1){return "Closed"}
     else if(param==2){return "Opened"}
     else if(param==3){return "Temporarily Closed"}
     else {return ""}
   }
}

в html дать лайк isShopOpen | header в html привязать

{{isShopOpen |  header }}

Answer 2

Другой способ - обработать значение, передав его методу и отобразить возвращаемое значение. В вашем файле .ts

generateShopOpenDisplay(param){
     if(param==1){return "Closed"}
     else if(param==2){return "Opened"}
     else if(param==3){return "Temporarily Closed"}
     else{ return ''}
}

и назовите его

{{generateShopOpenDisplay(isShopOpen)}}