使用 AngularFire2 作为列表检索数据答案

【问题标题】：Retrieve data using AngularFire2 as a list使用 AngularFire2 作为列表检索数据
【发布时间】：2019-05-30 01:38:20
【问题描述】：

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

我正在尝试使用 angularfirer2 从 Firebase 检索数据作为列表。但是在this.listings = this.db.list('/listings') as Observable<Listing[]> 中我收到一条错误消息

类型 'AngularFireList' 到类型的转换 'Observable' 可能是一个错误，因为这两种类型都没有充分重叠。

谁能帮我解决这个问题。

【问题讨论】：

标签： angular firebase-realtime-database angularfire2

【解决方案1】：

你可以像这样在.service文件中创建一个单独的getListing函数。

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

然后在组件的.ts文件中调用getEmployees函数

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

然后你可以通过下面的 List 的 for 循环来获取 HTML 文件中的数据。

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

【讨论】：