Dynamic list values

[yusijs]

I'm trying to create a select drop down that populates based off of an http request.

Relevant code is public clients: any[] = [];

ngOnInit() {
    this._clientListService.getClients()
      .subscribe(res => {
        this.clients = res;
        console.log(this.clients)
      })
  }

<ng-select [allowClear]="true"
              [items]="clients"
              (data)="refreshValue($event)"
              placeholder="Please select a client">
</ng-select>

However, the dropdown options are blank. Populating this on a works fine:

    <select class="form-control">
      <option *ngFor="let client of clients" value="client.client_id">{{client.client_id}} - {{client.client_id_name}}</option>
    </select>

Any clues? I'm guessing it's change detection not kicking in.

Ftr, I'm seeing you refer to a "query" option, but I can't find it anywhere. I find a couple mentions in your source, but not as input/output shrug

[Daeluse]

This functionality is pretty important at this point, I've looked through the proposed async solutions posted elsewhere and most of them seem 'hacky' or just plain don't work. Is there any ETA on when this library will support change detection and allow us to add items asynchronously?

[jkwiz]

I think this is the same problem I was having on RC.4 and 1.0.3.

I fixed it by putting the ng-select inside an ngIf.

<div *ngIf="clients.length > 0"> ... </div>

[curlyfro]

+1

[Kasper86]

+1 @jkwiz Thanks! That worked like a charm!!

[GreenRover]

+1

[twaldron]

@jkwiz if it used to work, this doesn't now. Not your fault, but this is a terrible miss by Valor and it seems like they have abandoned it.

[slimshady5]

+1

[toke182]

Fixed this in https://github.com/valor-software/ng2-select/pull/610

[JimJafar]

This might help: https://github.com/valor-software/ng2-select/issues/635#issuecomment-281094377

[sujitnale123]

@jkwiz Thanks! That worked like a breeze

[farhaan008]

I also faced the same issue. I used *ngIf="data.length!=0" to resolved it( this solution hide select for first time). but i found new way to resolve it, assign a empty value to it like public data:any = [ {id: '', text:' '} ]; hope it will help you.

[PuneetChauhan1]

not working yet..

[ChandraTerli]

I am still having issue binding data to ng2-select, can anybody help please? <ng-select [multiple]="true" [items]="items" > items: Array

];

[leandromatilla]

Component will not detect a change. Instead you need to do:

this.items = [...this.items, {id: 1, name: 'New item'}];

[leandromatilla]

I fixed it by putting the ng-select [items] value with "async".

<ng-select [items]="dropdownList | async">

[lygstate]

Component will not detect a change. Instead you need to do:

this.items = [...this.items, {id: 1, name: 'New item'}];

Good:)

[nikhilkhot46]

this.items = [...this.items, {id: 1, name: 'New item'}];

Solved my Problem Thanks