Lahiru Mirihagoda
Lahiru Mirihagoda

Reputation: 1163

Retrieve data using AngularFire2 as a list

   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.

Upvotes: 0

Views: 83

Answers (1)

Bhargav Usadadiya
Bhargav Usadadiya

Reputation: 44

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>

Upvotes: 1

Related Questions