машинописные перечисления со значением и отображаемым именем

Question

Я работал над машинописным текстом и хочу отобразить значения, отличные от строки enum, но значение должно быть числовым.

export enum yearofstudy {
     FirstYear,
     secondYear,
     ThirdYear
}

В приведенном выше коде мне нужно, чтобы значения были равны 0,1,2, но показывать 1-й, 2-й, 3-й год.Как я могу это сделать?

Answer 1

Это в значительной степени то, для чего предназначены трубы в Angular.Они позволяют вам определять это многократно и кэшируемым способом.Создайте трубу как

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

Тогда вы можете использовать

{{ yourValue | yearOfStudy }} 

Answer 2

Я бы преобразовал перечисление в массив и затем связал бы его с 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