Unable to Bind data comming from http post

[glenngsanchez]

Hi, how do I bind data coming from http post?

this.carmodels = [];
 this.getCarModels();

 this.carmodels.push({id:12,name:"Carmodel1"});
 this.carmodels.push({id:13,name:"Carmodel2"});

when logged the data in console, more data. but select-searchable only shows the last 2 (Carmodel1, Carmodel2).

I tried moving the last 2 lines inside http success, and it does not show any data anymore.

Thanks

[eakoriakin]

Hey, this.getCarModels() is an asynchronous operation. You need to do the assignment inside callback.

this.getCarModels().subscribe(carmodels => {
    this.carmodels = carmodels;

    // And then add some static items to the and of the array.
    this.carmodels.push({id:12,name:"Carmodel1"});
    this.carmodels.push({id:13,name:"Carmodel2"});
});

[glenngsanchez]

Hi eakoriakin,

I updated my code and follow your sample source file. I created an observable method like below:

function getCarModelsAsync(timeout=0):Observable<CarModelObj[]>{

    return new Observable<CarModelObj[]>(observer => {
      observer.next(this.getCarModels());
      observer.complete()
    }).pipe(delay(timeout));
 }

this.getCarModels() is getting data form http post.

and this sis how I called it:

this.getCarModelsAsync().subscribe(data =>{
      this.carmodels = data;
      console.log(this.carmodels);
    });

I notice some delay of fetching the data, and the list is still not showing.

Can you enlighten me more on this?

Thanks for the help.

[eakoriakin]

It works for me, can you show me your html for <select-searchable>?

[glenngsanchez]

This is my select-searchable

<select-searchable
[isEnabled]="!isReadOnly"
title="Model"
[(ngModel)]="carmodel"
[items]="carmodels"
itemValueField="Id"
itemTextField="ModelName"
[canSearch]="true"
(onChange)="modelChanged($event)">

[eakoriakin]

Hi @glenngsanchez, did you manage to solve the issue?

[eakoriakin]

Closed for inactivity.