Блог

Как добиться двусторонней привязки данных между enum и ion-select an?

Пример перечисления;

 export enum FooEnum {
  Option_1 = 1,
  Option_2 = 2,
  Option_3 = 3,
  Option_4 = 4,
  Option_5 = 5,
}
  

Пример класса компонента;

 export class Enums1Page implements OnInit {
    public dataVal = FooEnum.Option_4;
    get fooEnum() { return FooEnum; }
    ...
}
  

Пример шаблона;

 <ion-select [(ngModel)]="dataVal"> 
     <ion-select-option *ngFor="let entry of fooEnum | keys" value="{{ entry.key }}">{{ entry.name }}</ion-select-option>
</ion-select>
  

Обратите внимание, что ion-select-options приведенные выше списки созданы с использованием пользовательского канала, который отлично работает. Однако фактическая привязка данных к текущему выбранному значению не выполняется.

Я подозреваю, что это связано с тем, что внутренне перечисление вычисляется как целое число, в то время как ключи в ion-select-option , по-видимому, обрабатываются как строки. Я могу обойти эту проблему с помощью следующего взлома;

Добавлено в мой класс;

 get getFooEnum(): string {
    return this.dataVal.toString();
}
set getFooEnum(u: string) {
    this.dataVal =  u;
}
  

И скорректированы в моем HTML;

 <ion-select [(ngModel)]="getFooEnum"> 
    ...
</ion-select>
  

Таким образом, я могу предоставить строковую версию текущего значения Enum, с которым ion-select собирается выполнить двустороннюю привязку.

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

Есть ли лучший способ, возможно, способ приведения к строке значения перечисления с двусторонней привязкой в шаблоне — или какой-либо способ обрабатывать ion-select-option значения как целые числа?

Вот весь код, если вы хотите взглянуть глубже;

https://github.com/sygnaltech/ionic4UiPatterns/tree/master/src/app/enums1

ПРИМЕЧАНИЕ: В конечном счете, шаблон является частью приложения CRUD, сосредоточенного на объекте передачи данных. Поле enum будет общедоступным полем внутри этого объекта.

попробуйте присвоить свойству значение enum, чтобы оно могло работать

 export class Enums1Page implements OnInit {
    public dataVal = FooEnum.Option_4;
    public fooEnum = FooEnum;
    // get fooEnum() { return FooEnum; } <-- this will impact on performance issue too
}