Ion-Select установить начальное значение

Question

Я пытаюсь установить начальные данные, отображаемые для выбора Ion. Я сузил это до этого самого простого примера, хотя у меня есть это и в другой ситуации. Кажется, что большинство вопросов здесь используют [ngModel], который мне не нужен, потому что я использую форму Angular Reactive. HTML-код:

  <form [formGroup]="userDetailsForm" (ngSubmit)="onSubmit()">

 ... some stuff
<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select placeholder="Select One" formControlName="Gender">
    <ion-select-option value="3">Female</ion-select-option>
    <ion-select-option value="2">Male</ion-select-option>
    <ion-select-option value="1">Other</ion-select-option>
    <ion-select-option value="0">Prefer Not to Say</ion-select-option>
 </ion-select>
</ion-item>

 ... more stuff
<ion-button expand="full" type="submit">Submit</ion-button>

</form>

Мой код:

  ngOnInit() {

    this.userDetailsForm = this.formBuilder.group({
    ... some stuff
     Gender: [],
    });
    this.userService.getUserServer().subscribe (user => {
      // console.log('Patching the form');
      this.userDetailsForm.patchValue(user);
      ... other irrelevant code
    },
      error => this.helper.showAlert('We cant connect to the server at the moment msg is:' + error)
    );

  }

Поле всегда отображается пустым (с заполнителем, как показано), и я также попытался удалить заполнитель и использовать:

      <ion-select value ="3" formControlName="Gender">

Независимо от того, что я пытаюсь, он не покажет значение по умолчанию или что я установил ... Извините, если это очевидно, но чего мне не хватает? Большое спасибо.

EDIT Я попытался удалить часть formControlName = "Gender" , и теперь она работает. За исключением, конечно, это не будет частью реактивной формы ... Я думаю, что это пахнет немного глючно - я буду продолжать копать, тем не менее, любые дальнейшие мысли приветствуются.

Answer 1

Вы можете придумать много способов

Первый

 <ion-select [value]="selectedValue" placeholder="Select One" formControlName="Gender">
    <ion-select-option value="3">Female</ion-select-option>
    <ion-select-option value="2">Male</ion-select-option>
    <ion-select-option value="1">Other</ion-select-option>
    <ion-select-option value="0">Prefer Not to Say</ion-select-option>
 </ion-select>

И в вашем .ts файле вы можете управлять selectedValue, чтобы заполнить его любым

Вторым

<ion-select [compareWith]="compareById">
  <ion-select-option *ngFor="let ... of ..." [ngValue]="...">
    ...
  </ion-select-option>
</ion-select>

и в .ts файле

compareById(object1, object2) {
    return object1.id === object2.id // or some condition
  }

См. Сравнить с

А также вы можете попробовать [ngValue]="SomeValue"

Answer 2

Я отправил это как ответ на случай, если кто-то еще попадет в это.Я не уверен, что это из-за проблемы с ранним выпуском Ionic 4, но я исправил ее, переупорядочив строку выбора ионов.

 <ion-select placeholder="Select One" value = {{userDetailsForm.value.Gender}} formControlName="Gender" >
    <ion-select-option value="3">Female</ion-select-option>
    <ion-select-option value="2">Male</ion-select-option>
    <ion-select-option value="1">Other</ion-select-option>
    <ion-select-option value="0">Prefer Not to Say</ion-select-option>
 </ion-select>

, поместив 'value = xxx' перед'formControlName = yyyy' исправил это.Это странно ...

Answer 3

Вы можете попытаться добавить уже выбранную пустую опцию с заполнителем:

<ion-select formControlName="Gender">
            <ion-select-option value="" selected="selected" hidden="hidden">Choose here</ion-select-option>
            <ion-select-option value="3">Female</ion-select-option>
            <ion-select-option value="2">Male</ion-select-option>
            <ion-select-option value="1">Other</ion-select-option>
            <ion-select-option value="0">Prefer Not to Say</ion-select-option>
</ion-select>