Блог

Я использую реактивную форму, как показано ниже.

HTML-файл

  <ion-select formControlName="gender" (ionChange)="onGenderChange($event)">
     <ion-select-option value="1">Male</ion-select-option>
     <ion-select-option value="2">Female</ion-select-option>
 </ion-select>
 

Файл TS

Я хочу получить выбранный текст (мужской или женский) вместо его значения. Ниже показано событие изменения в раскрывающемся списке Выбрать.

   onGenderChange(event) {
    console.log("onGenderChange : ", event.detail.value); //its return only value
  }
 

Пожалуйста, помогите мне решить эту проблему.. Заранее спасибо.

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

Например, в моем файле подкачки .ts я создал эти данные с помощью вашей функции :

  myData = ["Testing", "Testing 2", "Testing 3"]

   onGenderChange(event) {
console.log("onGenderChange : ", event.detail.value); //its return only value
}
 

И с сохранением данных я мог бы использовать этот массив так, как я хочу, на странице .html

 <ion-item>
 <ion-label>Gender</ion-label>
  <ion-select formControlName="gender" (ionChange)="onGenderChange($event)">
  <ion-select-option value="{{myData[0]}}">{{myData[0]}}</ion-select-option>
  <ion-select-option value="{{myData[1]}}">{{myData[1]}}</ion-select-option>
  <ion-select-option value="{{myData[2]}}">{{myData[2]}}</ion-select-option>
  </ion-select>
</ion-item>
 

и в консоли вы получите «onGenderChange : Тестирование 2».