具有值和显示名称的typescript枚举

Posted 2021-05-04

我一直在研究打字稿，我希望显示除​​枚举字符串以外的值，但值必须是数字。

export enum yearofstudy {
     FirstYear,
     secondYear,
     ThirdYear
}

在上面的代码中，我需要值为0,1,2但显示为第1年，第2年，第3年。我怎样才能做到这一点？

答案

我会将枚举转换为数组然后我可以将它绑定到select

dropdownOfYear = Object.keys(yearofstudy).filter(key => !isNaN(Number(yearofstudy[key]))).map((a) => {    
  return {
    text: a,
    value: yearofstudy[a]
  }
});

在这里我迭代枚举，然后从数组中删除数字，因为我只需要那里的值，然后我返回我可以用于下拉列表的文本和值。

html

 <select>
     <option *ngFor="let item of dropdownOfYear" [value]="item.value">{{item.text}}</option>
  </select>

这是stackblitz的演示

另一答案

这几乎是Angular中管道的用途。它们允许您以可重用和可缓存的方式定义它。像这样创建一个管道

@Pipe({name: "yearOfStudy"})
export class YearOfStudyPipe implements PipeTransform {
  public transform(value: YearOfStudy): string {
    switch (value) {
      case FirstYear: return "1st Year";
      //... 
    }
  }
}

然后你可以使用

{{ yourValue | yearOfStudy }}