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

Posted 2023-03-15

【中文标题】如何在 ion-select-option 中动态设置默认值

【英文标题】：how to set value dynamically default value in ion-select-option

【发布时间】：2020-06-28 11:33:12

【问题描述】：

我正在使用 Ionic 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);
    );
   

register.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>

【问题讨论】：

试试这 3 个步骤，告诉我你得到了什么。 1. 在 onInit 而不是构造函数中初始化您的用户类型 2. [selected]="userData.business_type == item.name" ，这里您将“1”设置为值，然后将 item.name 与此进行比较，什么在 item.name 中吗？ 3. 在上面的代码中，ion-select 带有值 - “job/service”，如果您可以再次检查您的代码，在 ngmodel 中您将其指定为 1，因此根据我的观察，您已经弄乱了键和值，因为当然。如果还有其他事情，请告诉我

【参考方案1】：

在html中

  <ion-item>
    <ion-label>Occupation</ion-label>
    <ion-select placeholder="Select Occupation" [formControl]="serviceForm.controls['typename']" interface="popover" (ionChange)="changType($event)" [compareWith]="compareFn">
      <ion-select-option *ngFor="let item of serviceData" [value]="item">item.name</ion-select-option>
    </ion-select>
  </ion-item>

因为我总是使用角度反应形式模块。我在这里使用了 formControl 而不是 ngModel。并且需要将整个对象绑定到 ion-select-option 并使用“compareWith”。并且也在你的组件中做

 compareFn(e1: any, e2: any): boolean 
    return e1 && e2 ? e1.id == e2.id : e1 == e2;
  

在 ts 中也

this.serviceData.forEach(element => 
      if(element.id == this.userData.business_type) 
        this.appointmentForm.controls['typename'].patchValue(
          element
        )
      
    );

如果您对此有任何问题，请告诉我

【参考方案2】：

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

【参考方案3】：

我认为这是渲染问题，所以我使用 if 条件进行离子选择检查。

在.ts中

serviceData = [];

在.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>

【参考方案4】：

当将值分配给this.userData.business_type = "1"; 时存在页面渲染问题，该时间数组尚未加载意味着this.serviceData 值不可用。

为了测试尝试放

constructor ()  

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

所以让我们首先加载getAllService 函数，一旦响应将更新this.userData.business_type 值。

这会对你有所帮助。

【参考方案5】：

您的userData.business_type: '' 有一个空值。如果您需要默认值，请使用已知的默认值进行设置。

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

constructor() 

同时删除 html 模板中不必要的 <div>。

 <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>

【讨论】：

userData.business_type 不为空。我已经在构造函数中初始化了它。我已经更新了我的问题，你可以看到。当我的页面加载时，离子选择仅显示下拉按钮中没有显示值，但是当我单击下拉按钮时，显示值。但是当页面对用户可见时，我想默认显示第一个值。

您需要在构造函数之外设置值才能使其工作。我已经相应地更新了我的答案。

@UnnatiPatadia 你解决了这个问题吗？