为什么我在 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

能否将代码更改为下面提到的代码：

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

Answer 2

您需要在下拉设置中正确提及 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 中它 returns 对象具有这些属性。

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

希望对您有所帮助！

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

why i'm getting array of undefined objects, when i'm using Subscribed data into component.html Angular 6/8?

multi-select

observable

typescript

angular