multi-select object not working with arrays of arrays

Issue

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?

Looking at them drilled down is:

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

Thanks,

Tom

Solution

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

Answered By - Yong Shun