Retrieve data using AngularFire2 as a list

Question

   import { Injectable } from '@angular/core';
    import { AngularFireDatabase } from '@angular/fire/database';
    import { Observable } from 'rxjs';

    @Injectable({
      providedIn: 'root'
    })
    export class FirebaseService {
      listings: Observable<any[]>;
      constructor(private db: AngularFireDatabase) { }

      getListings(){
        this.listings = this.db.list('/listings') as Observable<Listing[]>
        return this.listings;
      }
    }

    interface Listing{
      $key?:string;
      title?:string;
      type?:string;
      image?:string;
      city?:string;
      owner?:string;
      bedrooms?:string;
    }

I'm trying to retrieve data as a list from Firebase using angularfirer2. But in this.listings = this.db.list('/listings') as Observable<Listing[]> I'm getting a error saying

Conversion of type 'AngularFireList<{}>' to type 'Observable' may be a mistake because neither type sufficiently overlaps with the other.

Can anyone help me with this matter.

Lahiru Mirihagoda · Accepted Answer · 2019-05-29 17:38:20Z

1

You Can Create a separate function of getListing In .service file like this.

    getEmployees() {
        return this.firestore.collection('employees').snapshotChanges();
    }

And then call the getEmployees Function in component's .ts file

    list: Employee[];
     ngOnInit() {
    this.service.getEmployees().subscribe(actionArray => {
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...item.payload.doc.data()
        } as Employee;
      })
    });
    }

and then you can get data in HTML file by for loop of List like below.

     <tbody>
    <tr *ngFor="let emp of list">
      <td >{{emp.empCode}} - {{emp.fullName}}</td>
      <td >{{emp.position}}</td>
      <td >{{emp.mobile}}</td>
    </tr>
  </tbody>

edited May 29, 2019 at 17:38

Lahiru Mirihagoda

1,1731 gold badge17 silver badges32 bronze badges

answered Mar 11, 2019 at 5:41

Bhargav Usadadiya

442 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Retrieve data using AngularFire2 as a list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related