Привязка перечисления TypeScript / Angular 7 к Ionic 4 ion-select

Question

Извиняюсь, если у меня неправильная терминология; Я новичок во всем стеке IONIC и не знаю, где заканчивается один слой, а начинается другой.

У меня есть ряд проблем, связанных с перечислениями TypeScript, и привязка их к ion-select. Все упоминания, которые я нашел, ссылаются на более старые версии TypeScript, Angular или IONIC, и мне кажется, что мне не хватает некоторых важных понятий.

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

Вот именно то, что я пытаюсь достичь-

1. Определить перечисление с целочисленными значениями (тривиально)
2. Используйте это перечисление как свойство внутри класса, которое будет передано в REST API и сохранено в MongoDB. (Тривиальное)
3. В пользовательском интерфейсе «добавить» и «редактировать» свяжите экземпляр этого класса. Свойство enum объекта будет иметь двустороннюю привязку к ion-select.
4. При загрузке страницы заполните ion-select полным набором возможных перечислений, используя имя в качестве отображаемого текста и целочисленное значение в качестве значения.

Вот как я это сделал в настоящее время;

Enum;

export enum UserType {
    SystemAdmin = 1,
    SchoolAdmin = 10,
    DepartmentAdmin = 20,
    Teacher = 50,
    Student = 100,
}

Ключевые части класса, содержащие его;

export class UserData {
    userType: UserType = UserType.Student; // string;
    name: string;
    ...
}

Я инициализировал поле в приведенном выше примере, на случай, если это является частью проблемы.

Excerpted IONIC UI машинопись;

import { UserData, UserType } from 'models/user.dto';
export class UserEditPageimplements OnInit {

    // for access to the Enums, within this context, 
    // needed for template access? 
    get userTypes() { return UserType; }

    // the user data, retrieved from an API 
    user = new UserData();

    // HACK: getters/setters which
    // 1. give me access to the object property
    // 2. convert it to/from a string, for the ion-select
    get getUserType(): string {
        return this.user.userType.toString();
    }
    set getUserType(u: string) {
        this.user.userType = +u;
    }

    // Provides access to the Keys array of the enum 
    userTypeKeys = Object.keys(UserType);

    ...
}

и соответствующий HTML;

В этом примере я просто пытаюсь связать значение; Я могу подтвердить, что это загружается правильно в ngInit.

<ion-select [(ngModel)]="getUserType"> 
    <ion-select-option *ngFor="let t of userTypeKeys;" value="{{ t }}">{{ userTypes[t] }}</ion-select-option>
</ion-select>

В целом это работает, но во вспомогательном коде есть огромное количество взлома.

В частности;

• Могу ли я связать ion-select с целочисленным значением и / или преобразовать его в строковое значение в HTML. Я могу преобразовать строку в число, например "+ foo", но я не знаю синтаксиса в HTML для преобразования числа в строку.
• Я бы хотел избавиться от userTypes() и ссылаться на UserType напрямую.
• Я бы хотел исключить get / set getUserType() и напрямую использовать свойство объекта userType, ИЛИ хотя бы переместить get / set в класс (я не получаю результата привязки, когда пытаюсь связать ion-select напрямую к любым свойствам класса.
• Я бы тоже хотел исключить userTypeKeys, если это возможно.

Спасибо за любые предложения.