Как бы я изменил отображаемый текст в HTML Angular?

Question

У меня есть 6 вкладок, отображаемых в моем шаблоне Angular:

 <tabset class="tabs">
      <tab *ngFor="let option of options" [heading]="option.type" >
      <!-- tab content -->
 </tab>

заголовок каждой вкладки читается в довольно некрасивом формате изДанные JSON (шесть значений: NEW, РЕЗЮМЕ, ТЕКУЩИЙ, EXPIRED, ARTICLE, EXTRA ).

Я хотел бы иметь возможность печатать эти строки довольно красиво.Например, изменить:

' EXPIRED ' -> ' Истек срок действия '

или

'РЕЗЮМЕ '->' Сводный расчет '

Как я могу это сделать?

Answer 1

Я бы предложил создать объект с вашим отображением

В вашем TS:

const mapping = {
       'EXPIRED': 'Expired Section',
       'SUMMARY':'Summary Calculation'
};

В вашем HTML:

 <tabset class="tabs">
      <tab *ngFor="let option of options" [heading]="mapping[option.type]" >
      <!-- tab content -->
 </tab>

Answer 2

Создайте функцию, которая сделает ваш трюк:

public myFormats = {
   EXPIRED: 'Expired Section',
   ....
}

public getMyFormat(type){
   return this.myFormats[type];
}

<tabset class="tabs">
      <tab *ngFor="let option of options" [heading]="getMyFormat(option.type)" >
      <!-- tab content -->
 </tab>

Кредиты mr.void