当我在Component.html Angular 6/8中使用订阅数据时，为什么会得到未定义对象的数组？

Question

从API订阅数据并尝试在ng-multiselect-dropdown中使用它时。但是ng-multiselect-dropdown仅包含未定义的对象作为选项列表。订阅它后，立即在控制台中打印它会打印期望值。

输出：

控制台：

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);
    })
  }

Stackblitz URL

Answer 1

您需要在下拉设置中正确提及idField和textField。

this.dropdownSettings = {
      singleSelection: false,
      idField: "id", //changed itemId to id
      textField: "name",// changed itemName to name
      selectAllText: "Select All",
      unSelectAllText: "UnSelect All",
      itemsShowLimit: 3,
      allowSearchFilter: true
    };

因为在您的API中，它会返回具有这些属性的对象。

工作链接=> https://stackblitz.com/edit/angular-firedemo-zdc3zk

希望有帮助！

Answer 2

您可以将代码更改为以下提到的一种：

constructor(private db: AngularFirestore) {
    const things = this.db.collection('games').valueChanges();
    things.subscribe((data) => this.arr = data;)
  }