Блог

Прошу прощения, если у меня какая-либо терминологическая ошибка; Я новичок во всем стеке IONIC и не уверен, где заканчивается один слой и начинается другой.

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

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

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

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

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

Перечисление;

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

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

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

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

Выдержка из машинописного текста 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 , если это возможно.

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