Question

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

export enum yearofstudy {
     FirstYear,
     secondYear,
     ThirdYear
}

在上面的代码中，我需要将值设为0,1,2，但将显示为第一年，第二年，第三年。我该怎么办？

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 }}

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

2 个答案: