I am trying to create several ng-selects whereby I filter each one from the same array i.e. its an array with different options to use one list for all rather than multiple arrays being bound.
I have the following variables in an angular component that I was testing with:
sites: Dropdown[];
dropdownValues: Dropdown[];
Dropdown is a class that contains 3 variables: id, text, group. The arrays above are written into by getting a list of different items from an API call like so:
this.configService.getDropdowns.subscribe(result => {
this.sites = result.filter(dd => dd.group == 'Site');
this.dropdownValues = result;
});
In the code above, I used the this.sites= example to test filtering the array to test populate the dropdown and this works ok when setting the ng-select [items]="sites". But I don't want to write a local variable and filter line for each dropdown on the page so I tried using a function:
getDropdowns(group: string): Dropdown[] {
if(this.dropdownValues == null) return [];
else return this.dropdownValues.filter(dd => dd.group == group);
}
And then I changed the [items] to: [items]="getDropdowns('Department')".
This did actually work and it did now list the correct items BUT for some reason I can no longer actually select them anymore so I assume doing this has broken the binding in some way. Is there a better way I should have done this?
ng-select examples on my html:
<ng-select [items]="sites" bindLabel="text" bindValue="id" [multiple]="true" [closeOnSelect]="true" [(ngModel)]="filters.siteIds" name="cboSite" ></ng-select> // works great
<ng-select [items]="getDropdowns('Department')" bindLabel="text" bindValue="id" [multiple]="true" [closeOnSelect]="true" [(ngModel)]="filters.departmentIds" name="cboDepartment" ></ng-select> // shows options correctly but cannot select