Angular - Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

Question

I am building an angular app with firebase where I am trying to fetch images from the firebase database, but I am getting the following error

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

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

component.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>

Where am I going wrong? Any kind of help would be greatly appreciated. Thanks.

Answer 1

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

getFileUpload() return an Observable. To get the data FROM the observable, you must subscribe and save the result in a variable. NOT do this.fileUploads=this.uploadService().., this has no sense.