用来自几个可观察对象的数据填充屏幕

时间:2019-05-15 14:53:33

标签: angular typescript google-cloud-firestore observable

我有一个屏幕,其中填充了从firestore返回的对象,但是我无法在同一onInit上返回两个查询的数据

服务:

      export class TcpService implements MPersist{
      tcpsO: Observable<TcpID[]>;
      private tcpCollection: AngularFirestoreCollection<Tcp>;
      constructor(private db: AngularFirestore) { }

      addDoc(data: Tcp) {
        this.tcpCollection.add({ nome: data.nome, nivel: data.nivel, registro: data.registro })
      }
      editDoc(data:TcpID){
        this.tcpCollection.doc(data.id).set({ nome: data.nome, nivel: data.nivel, registro: data.registro })
      }

      removeDoc(id){
        this.tcpCollection.doc(id).delete();
      }

      getDocs() {
        this.tcpCollection = this.db.collection<Tcp>('tcps');
        return this.tcpsO = this.tcpCollection.snapshotChanges().pipe(
          map(actions => actions.map(a => {
            const data = a.payload.doc.data() as Tcp;
            const id = a.payload.doc.id;
            return { id, ...data }
          }))
        );

      }
    }
    export interface TcpID extends Tcp { id: string }

对于组件:

    ngOnInit() {
        return this.service.getDocs().subscribe(
          res => {
            this.dataSource.sort = this.sort;
            this.dataSource.data = res;
          }
        );
      }

因此我可以处理数据,但是当我尝试返回2个不同的查询不起作用时,我需要用2个不同的查询中的信息填充组件

1 个答案:

答案 0 :(得分:0)

使用数据源时,建议在更改数据时设置一个新的数据源。所以基本上像这样:

this.dataSource = new DataSource(res)

可以解决您的问题。