I'm using Ionic 4.
I want to show a default value in ion-select-option.
Option's values come from the server.
API works all values show but on click of ion-select.
But I want to show the default value.
I have already initialized userData.business_type in the constructor.
I have updated my question you can see that.
when my page load no value shown in ion-select only drop-down button show but when I click on the drop-down button then value shown.
But I want to show the first value by default when page visible to the user.
Response
{"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>
OR
<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>
5条答案
按热度按时间lkaoscv71#
您的
userData.business_type: ''
有一个空值。如果您需要默认值,请用已知的默认值设置它。同时删除html模板中不必要的
<div>
。8fq7wneg2#
当将值分配给
this.userData.business_type = "1";
时,页面呈现存在问题,因为尚未加载时间数组意味着this.serviceData
值不可用。试着把
因此,让我们先加载
getAllService
函数,一旦有响应,就更新this.userData.business_type
值。这个能帮你
omhiaaxx3#
我认为这是渲染问题,所以我使用了if条件来离子选择检查。
英寸ts
在.html中
3xiyfsfu4#
如果在设置ion-select值之后加载了ion-select-option值,则不会显示所选的默认值。由于您使用后端服务来获取select-options,因此最好在通过设置 *ngIf条件获取所有select-options之后显示整个ion-select组件
wnavrhmk5#
HTML格式
因为我总是使用角React形式模块。我在这里使用formControl而不是ngModel。并且需要将整个对象绑定到ion-select-option并使用“compareWith”。并且在组件中也使用
在TS中还
如果您对此有任何问题,请告诉我