如何在离子选择选项中动态设置默认值

Question

我使用的是Ionic 4。
我想在离子选择选项中显示默认值
选项的值来自服务器
neneneba 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"}]}

寄存器.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>

Answer 1

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

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条件来选择检查这个。

英寸

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

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

Answer 5

在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。并且需要将整个对象绑定到离子选择选项并使用"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
)
}
});

如果你对这个有任何问题，请告诉我