时间戳

首页 > 解决方案 > 如何在 ion-select-option 中动态设置默认值

android - 如何在 ion-select-option 中动态设置默认值

问题描述

我正在使用 Ionic 4。
我想在 ion-select-option 中显示默认值。
选项的值来自服务器。
API 工作所有值显示，但点击离子选择。
但我想显示默认值。

我已经在构造函数中初始化了 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"}]}

注册.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>

标签： androidionic-frameworkionic4default-valueion-select

解决方案

如果在设置离子选择值后加载您的离子选择选项值，则不会显示选择的默认值。由于您使用后端服务来获取选择选项，因此通过设置 *ngIf 条件在获取所有选择选项后更好地显示整个离子选择组件

推荐阅读