无法显示FirebaseDatabase中的数据

时间:2019-03-22 19:58:14

标签: javascript angular firebase asynchronous async-await

我正在尝试在ng-multiselect-下拉列表中显示一组项目。当我对数组中的值进行硬编码时,它们会显示出来,但是,当我尝试从数据库中的项目动态创建数组时,即使它们已正确记录在数组中,它们也不会显示出来。

save.component.ts

...

populateDropdown(callback) {
    let ham = this.students.snapshotChanges().map(changes => {
        return changes.map(c => ({key: c.payload.key,...c.payload.val()}));
    });

    callback(ham);
}

ngOnInit() {
    //stuff
    this.fs.initFirebaseApp(environment.userFirebase, 'users');
    this.students = this.fs.getList('/students');
    let aCall = (data) => {
        let count = 1;
        data.forEach(student => {
            student.forEach(element => {
                this.dropdownList.push({
                    item_id: count++,
                    item_text: element.first + " " + element.last
                });
            });
        });
    }

    this.populateDropdown(aCall);

    this.dropdownSettings = {
        singleSelection: false,
        idField: 'item_id',
        textField: 'item_text',
        selectAllText: 'Select All',
        unSelectAllText: 'Unselect All',
        itemsShowLimit: 3,
        allowSearchFilter: true
    };
    console.log(this.dropdownList);
    this.dropdownList1 = this.dropdownList.slice();
    console.log(this.dropdownList1);
}
...

save.component.html

<ng-multiselect-dropdown
            [placeholder]="'Select Students'"
            [data]="dropdownList"
            [(ngModel)]="selectedItems"
            [settings]="dropdownSettings"
            (onSelect)="onItemSelect($event)"
            (onSelectAll)="onSelectAll($event)"
          >
 </ng-multiselect-dropdown>

firebase.service.ts

...
  public initFirebaseApp(config: FirebaseAppConfig, firebaseAppName: string) {
        this._db = new AngularFireDatabase(_firebaseAppFactory(config, firebaseAppName));
    }

    /** Function to get firebase DB list */
    public getList(path: string): AngularFireList<{}> {
        return this._db.list(path);
    }

    /** Function to get firebase DB object */
    public getObject(path: string): AngularFireObject<{}> {
        return this._db.object(path);
    }

console.log(this.dropdownList)显示一个对象数组,而console.log(this.dropdownList1)显示一个空数组。分别记录dropdownList中的每个元素也不会记录任何内容。

[{ item_id: 1, item_text: "Test Name" }
{ item_id: 2, item_text: "Alice Bob" }
{ item_id: 3, item_text: "Foo Name" }
{ item_id: 4, item_text: "Test Test" }]
​```

0 个答案:

没有答案