Angular - 找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays

Question

我正在使用 firebase 构建一个 angular 应用程序，我试图从 firebase 数据库中获取图像，但我收到以下错误

找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

service.ts

          import {Injectable} from '@angular/core';
      import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
      import * as firebase from 'firebase';

      import {FileUpload} from '../profile/fileupload';

      @Injectable()
      export class UploadFileService {

        constructor(private db: AngularFireDatabase) {}
        getFileUploads (): AngularFireList<FileUpload[]>{
              return this.db.list('/uploads');
          }

        private basePath = '/uploads';
        fileUploads: AngularFireList<FileUpload[]>;

        pushFileToStorage(fileUpload: FileUpload, progress: {percentage: number}) {
          const storageRef = firebase.storage().ref();
          const uploadTask = storageRef.child(`${this.basePath}/${fileUpload.file.name}`).put(fileUpload.file);

          uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
            (snapshot) => {
              // in progress
              const snap = snapshot as firebase.storage.UploadTaskSnapshot
              progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100)
            },
            (error) => {
              // fail
              console.log(error)
            },
            () => {
              // success
              fileUpload.url = uploadTask.snapshot.downloadURL
              fileUpload.name = fileUpload.file.name
              this.saveFileData(fileUpload)
            }
          );
        }

        private saveFileData(fileUpload: FileUpload) {
          this.db.list(`${this.basePath}/`).push(fileUpload);
        }

        //getFileUploads(query = {}) {
          //this.fileUploads = this.db.list(this.basePath, {
            //query: query
          //});
          //return this.fileUploads;
        //}
      }

组件.ts

        import { Component, OnInit } from '@angular/core';
    import { ItemService } from '../services/item.service';
    import {FileUpload} from '../profile/fileupload';
    import {UploadFileService} from '../services/upload-file.service';
    import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; 

    @Component({
      selector: 'app-admin',
      templateUrl: './admin.component.html',
      styleUrls: ['./admin.component.css']
    })
    export class AdminComponent implements OnInit {

      fileUploads: AngularFireList<FileUpload[]>;

      constructor(private itemService: ItemService, private uploadService: UploadFileService) { }

      ngOnInit() {
        //this.uploadService.getFileUploads();
        this.fileUploads = this.uploadService.getFileUploads();
       //this.fileUploads = this.uploadService.getFileUploads({limitToLast: 6});
      }
    }

.html

<div *ngFor = "let file of fileuploads">
{{file.name}}
<img src="{{file.url}}"/>
</div>

我哪里出错了？任何形式的帮助将不胜感激。谢谢。

Answer 1

ngOnInit() {
   this.uploadService.getFileUploads().subscribe(result=>{
       this.fileUploads = result;
   });
}

getFileUpload() 返回一个 Observable。要从 observable 获取数据，您必须订阅并将结果保存在变量中。不要这样做 this.fileUploads=this.uploadService()..，这没有任何意义。