Ion select not updating after calling api

Ionic Framework
1

I am developing an ionic app. I want to fetch the items in options of ion select fro server using api. The loading only after clicking of ion-select. Here the datais changing on after clicking on second time. Is there any solution?
The source code is

home.html

<ion-label stacked>Vehicle</ion-label>
<ion-select [(ngModel)]="suffix" name="suffix"(click)="vehicleFn()">
<ion-option *ngFor="let item of Suffix" [value]="item.code">{{item.name}}</ion-option>
</ion-select>

home.ts

constructor(public navCtrl: NavController){
    this.Suffix= [{"code":"0","name":"Select"}];
}

vehicleFn(){
    this.restProvider.selectSuffix()
    .then(data => {
        this.Suffix=[{"code":1,"name":"car"},{"id":2,"name":"bus"}]
    });
}

In here i have one select option for selecting vehicle. The vehicle details want to get from server. But here when i click it is not coming. But second click it is showing. So when calling the click function. is not updating the “this.Suffix”. How to update “this.Suffix” in click function.

2

This is one of those (relatively rare) cases where you have to manually goose change detection. See this thread.

1 Like
3

As per the @rapropos comment.
I changed the code to

this.Suffix=[{“code”:1,“name”:“car”},{“id”:2,“name”:“bus”}]

this.form = fb.group({
suffix: [’“1”]
});

onCountryvehicleFn(): void {

this.restmasterProvider.selectSuffix()
.then(data => {
this.resp = data;
console.log(this.resp);
var res =JSON.parse(this.resp.data);

    this.Suffix=res

	
});
this._cdr.detectChanges();

}

The ChangeDetectorRef is used but the first we want add some default values in array