как установить значение динамически значение по умолчанию в ion-select-option

Question

Я использую Ioni c 4.
Я хочу показать значение по умолчанию в ion-select-option.
Значения опции поступают с сервера.
API работает, все значения отображаются, но включены щелчок ion-select.
Но я хочу показать значение по умолчанию.

Я уже инициализировал userData.business_type в конструкторе.
Я обновил свой вопрос, вы можете видеть это.
когда моя страница загружается, никакое значение не отображается в показе раскрывающейся кнопки только для выбора иона, но когда я нажимаю на раскрывающуюся кнопку, отображается значение.
Но я хочу показать первое значение по умолчанию, когда страница видна для пользователь.

Ответ

 {"success":1,"service_details":[{"id":"1","name":"Job\/Service","status":"1"},
{"id":"2","name":"Student","status":"1"},{"id":"3","name":"House Wife","status":"1"},{"id":"4","name":"Business","status":"1"}]}

register.ts

 userData = { "fname": "", "lname": "", "contact_no": "", "email_id": "", "password": "", 
 "business_type": "", "organization_name": "", "designation": "", };

constructor () { 
     this.userData.business_type = "1";
 }

getAllService(){
    let loading = this.loadingCtrl.create({
      spinner: 'circles',
      message: 'Please wait...'
    }).then(loading => loading.present());

    this.authService.getData("get_all_service_type.php").then((result) => {
      this.items = result;
        this.success = this.items.success;
        console.log(this.success);

        if (this.success == 1) {
          this.loadingCtrl.dismiss();
          this.serviceData = this.items.service_details;
          console.log(this.serviceData);
        } else {
          this.message = this.items.message;
          this.loadingCtrl.dismiss();
        }

    }, (err) => {
       this.loadingCtrl.dismiss();
      console.log("Error", err);
    });
  } 

регистр. html

 <ion-item>
     <ion-label>Occupation </ion-label>
     <ion-select value="Job/Service" (ionChange)="optionsFn()" name="business_type" [(ngModel)]="userData.business_type">
         <div *ngFor="let item of serviceData">
             <ion-select-option value="{{item.id}}">{{item.name}}
             </ion-select-option>
         </div>
      </ion-select>
 </ion-item> 

ИЛИ

<ion-item>
   <ion-label>Occupation</ion-label>
   <ion-select value="1" (ionChange)="optionsFn()" name="business_type" [(ngModel)]="userData.business_type">
        <ion-select-option *ngFor="let item of serviceData" value="{{item.id}}" [selected]="userData.business_type == item.name">{{item.name}}</ion-select-option>
   </ion-select>
</ion-item>

Answer 1

Если ваши значения ion-select-option загружаются после установки значения ion-select, он не будет отображать выбранное значение по умолчанию. Поскольку вы используете внутренний сервис для извлечения опций выбора, лучше отобразить весь компонент ion-select после извлечения всех опций выбора, установив * ngIf условие

Answer 2

Существует проблема рендеринга страницы, так как при присвоении значения this.userData.business_type = "1";, что временной массив не был загружен, означает, что значение this.serviceData недоступно.

для тестирования попробуйте поставить

constructor () { 

  setTimeout(() => {
         this.userData.business_type = "1";
  }, 2000);
 }

Итак, давайте сначала загрузим функцию getAllService, а когда отклик придет, обновим значение this.userData.business_type.

Это поможет вам.

Answer 3

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

in .ts

serviceData = [];

in. html

 <ion-item>
     <ion-label>Occupation </ion-label>
     <ion-select *ngIf="serviceData.length" (ionChange)="optionsFn()" name="business_type" [(ngModel)]="userData.business_type">
         <ion-select-option *ngFor="let item of serviceData" [value]="item.id"> 
           {{item.name}}
         </ion-select-option>
      </ion-select>
 </ion-item>

Answer 4

Ваш userData.business_type: '' имеет пустое значение. Если вы хотите использовать значение по умолчанию, установите для него известное значение по умолчанию.

// set business_type here
userData = { "fname": "", "lname": "", "contact_no": "", "email_id": "", "password": "", 
 "business_type": "1", "organization_name": "", "designation": "", };

constructor() {}

Также удалите ненужные <div> в шаблоне html.

 <ion-item>
     <ion-label>Occupation </ion-label>
     <ion-select (ionChange)="optionsFn()" name="business_type" [(ngModel)]="userData.business_type">
         <ion-select-option *ngFor="let item of serviceData" value="{{item.id}}"> 
           {{item.name}}
         </ion-select-option>
      </ion-select>
 </ion-item>