Ng2-select: Dynamic list values
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
<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_
yusijs
All 17 comments
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?
Daeluse
on 30 Jun 2016
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>
jkwiz
on 12 Jul 2016
+1
curlyfro
on 19 Jul 2016
+1
@jkwiz Thanks! That worked like a charm!!
Kasper86
on 22 Jul 2016
+1
GreenRover
on 31 Oct 2016
@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.
twaldron
on 4 Nov 2016
+1
slimshady5
on 8 Jan 2017
Fixed this in https://github.com/valor-software/ng2-select/pull/610
toke182
on 24 Jan 2017
This might help: https://github.com/valor-software/ng2-select/issues/635#issuecomment-281094377
EvilJimJafar
on 20 Feb 2017
@jkwiz Thanks! That worked like a breeze
sujitnale123
on 24 Jul 2017
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.
farhaan008
on 11 Nov 2017
not working yet..
PuneetChauhan1
on 11 Apr 2018
I am still having issue binding data to ng2-select, can anybody help please?
items: Array
];
ChandraTerli
on 16 May 2018
Component will not detect a change. Instead you need to do:
this.items = [...this.items, {id: 1, name: 'New item'}];
leandromatilla
on 26 Oct 2018
I fixed it by putting the ng-select [items] value with "async".
leandromatilla
on 26 Oct 2018
Component will not detect a change. Instead you need to do:
this.items = [...this.items, {id: 1, name: 'New item'}];
Good:)
lygstate
on 9 Mar 2019
this.items = [...this.items, {id: 1, name: 'New item'}];
Solved my Problem
Thanks
nikhilkhot46
on 29 Apr 2019
Related issues
bissolli
·
6Comments
fdu-axiometrics
·
5Comments
jenb34
·
5Comments
cherrydev
·
5Comments
Cadenei
·
4Comments
Most helpful comment
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>