带有值和显示名称的打字稿枚举

Question

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

export enum yearofstudy {
     FirstYear,
     secondYear,
     ThirdYear
}

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

Answer 1

我会将枚举转换为数组，然后我可以将它绑定到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的演示

Answer 2

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

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

然后你可以使用

{{ yourValue | yearOfStudy }}