0

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
Irma Nohere
  • 35
  • 2
  • 6
  • 1
    Hi Irma, even if getDropdowns() worked I believe the calling of methods could introduce a performanceproblem if you have many of them. On every change detection ( = very often) angular would have to call the method to check if the items changed, instead of simply comparing 2 references. You would probably have to use OnPush change detection to avoid that. I don't know a better way than what you already have. – Jaqen H'ghar Apr 01 '21 at 19:45
  • You might try to create only 1 property with all dropdownitems, where each key would be the group and each value an array with the groups items. Then you could index by group into that property from the template. Like here: https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key – Jaqen H'ghar Apr 01 '21 at 20:26
  • I can see how I can use groupBy to change the list but not sure how you think I would approach/change the template accordingly. Sorry if I'm missing something obvious – Irma Nohere Apr 01 '21 at 21:53
  • Is it simper better for performance to have a unique array for each ng-select? – Irma Nohere Apr 01 '21 at 21:54
  • One or several separate properties should not matter for performance. In template it would be [items]="propertyName['groupName']" or even [items]="propertyName.groupName" – Jaqen H'ghar Apr 02 '21 at 07:15

0 Answers0