After receiving data from an API subscription, I attempted to utilize it in an ng-multiselect-dropdown. However, the ng-multiselect-dropdown only displays undefined objects as options. Oddly enough, when I print the data in console immediately after subscribing, it shows the expected values.
Output: https://i.sstatic.net/4ZGYk.png
Console: https://i.sstatic.net/NVnSm.png
component.Html
<ng-multiselect-dropdown
[placeholder]="'custom placeholder'"
[data]="arr"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>
component.ts
constructor(private db: AngularFirestore) {
const things = this.db.collection('games').valueChanges();
things.subscribe(data => {
this.arr = data;
console.log(this.arr);
})
}