Получить данные, используя AngularFire2 в виде списка - PullRequest
Новая
       11

Получить данные, используя AngularFire2 в виде списка

0 голосов
/ 11 марта 2019 
   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;
    }

Я пытаюсь получить данные в виде списка из Firebase, используя angularfirer2.Но в this.listings = this.db.list('/listings') as Observable<Listing[]> я получаю сообщение об ошибке:

Преобразование типа 'AngularFireList <{}>' в тип "Observable" может быть ошибкой, поскольку ни один тип не совпадает в достаточной степени с другим.

Может кто-нибудь помочь мне с этим вопросом.

1 Ответ

1 голос
/ 11 марта 2019

Вы можете создать отдельную функцию файла getListing In .service следующим образом. 

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

А затем вызвать функцию getEmployees в файле .ts компонента 

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

и затем вы можете получить данные в HTML-файле с помощью цикла List, как показано ниже. 

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