Ion select not updating after calling api

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.

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

1 Like

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