multi-select object not working with arrays of arrays

user_3385954 0
Viewed 285

I am trying to use a multi-select dropdown with an array of arrays but it doesn't seem to work.

The html is:

<ng-multiselect-dropdown [placeholder]="'Schools'" [settings]="transcriptSettings"
  [data]="selectedInstitutions" [(ngModel)]="abbreviation.institutionIds">
</ng-multiselect-dropdown>

The data is selectedInstitutions which has 2 records but doesn't work If I changed it to another array (institutionIds), it displays correctly. The difference seems to be that in the debugger the one that doesn't work says "Array" and the one that does work says "{...}. Not sure why that is an issue.

Why are they different?

enter image description here

Looking at them drilled down is:

enter image description here

In DevTools, institutionList which works is an array of objects and the selectInstitutions is an array of arrays.

enter image description here

Thanks,

Tom

angular
1 Answers

According to ng-multiselect-dropdown (Setting section),

Setting Type Description
data Array Array of items from which to select. Should be an array of objects with id and text properties

Solution

Hence, flatten the array of arrays to an array of objects.

this.selectedInstitutions = [].concat(...this.selectedInstitutions);

Sample Demo on StackBlitz

user_80176900
Related