Ionic 4: Установить опцию выбора ионных ионов по умолчанию

Question

Пытается установить параметр по умолчанию в элементе управления <ion-select>. Использование v4 rc2, но это было проблемой, так как я начал с поздних бета-версий v4.

<ion-select> правильно устанавливает выбор по умолчанию, но я получаю небольшую нижнюю строчку. Выбранная опция не отображается. Когда я выбираю элемент управления, отображается предупреждение и выбирается правильная опция. Или я что-то не так делаю?

Имеет значение порядок установки measureSetId против загрузки measureSets[]?

Мысли? признателен за любую помощь в этом.

<ion-select name="measureSetSelect" [(ngModel)]="selectedMeasureSetId">
  <ion-select-option *ngFor="let measureSet of measureSets" [value]="measureSet.measureSetId">
    {{measureSet.name}}
  </ion-select-option>
</ion-select>

public measureSets: IMeasureSet[];
public selectedMeasureSetId: number;

ngOnInit() {
  this.measureSetsApiService.query().pipe(take(1)).subscribe(result => {
      this.selectedMeasureSetId = result.find(i => i.isDefault).measureSetId || 1;
      this.measureSets = result;
    });
}

Answer 1

Когда список options содержит объекты, вам нужно использовать [ngValue] и [compareWith] Попробуйте этот код:

<ion-select name="measureSetSelect" [(ngModel)]="selectedMeasureSet" [compareWith]="compareById">
  <ion-select-option *ngFor="let measureSet of measureSets" [ngValue]="measureSet">
    {{measureSet.name}}
  </ion-select-option>
</ion-select>

В вашем компоненте:

compareById(o1, o2) {
    return o1.id === o2.id
  }

Обновление до компонентной части, чтобы установить объект ngModel:

public selectedMeasureSet: IMeasureSet;

ngOnInit() {
  this.measureSetsApiService.query().pipe(take(1)).subscribe(result => {
      this.selectedMeasureSet = result.find(i => i.isDefault) || result.find(i => i.id === 1);
      this.measureSets = result;
    });
}

Также рассмотрите возможность передачи этого документа для дальнейшего чтения: https://medium.com/@kastepanyan24/how-to-set-selected-option-dynamically-in-angular-6-85c99958cca5