如何更改HTML Angular中显示的文本？

Question

我的Angular模板中确实显示了6个标签：

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

从JSON数据中以丑陋的格式读取每个选项卡的标题（六个值是： 新，摘要，当前，过期，文章，额外）。

我希望能够漂亮地打印这些字符串。例如，要更改：

' EXPIRED '->'过期部分'

或

'摘要'->'摘要计算'

我该怎么做？

Answer 1

创建一个可以解决问题的函数

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

Answer 2

我建议使用您的映射创建一个对象

在您的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>