javascript - 转换 RxJS Observable

Question

我使用 angularFirestore 在 firebase 上查询，我想使用 DocumentReference 连接来自多个文档的数据。

管道中的第一个运算符映射返回一个 IOrderModelTable 数组，第二个运算符，即 switchMap 遍历数组，并为每个元素使用每个元素中包含的 id 来查询其他表中的数据。

问题是在 swithMap 中，我获得了一个 observable 数组，这是由于 anidated map operators。如何获取 IOrderModelTable 数组，然后返回该数组的可观察对象。

代码是:

getDataTableOperatorsFromDB(): Observable<IOrderModelTable[]> {
  const observable = this.tableOperatorsCollectionsRef.snapshotChanges().pipe(
    map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as IOrdersModelDatabase;
        const id = a.payload.doc.id;

        data.ot = id;
        return data;
      });
    }),
    switchMap(data => {
      const result = data.map(element => {
        return this.afs.collection('Orders/').doc(element.orderNumberReference.id).valueChanges().pipe(map(order => {
          return {
            otNumber: element.ot,
            clientName: '',
            clientReference: order.clientReference,
            id: element.orderNumberReference,
          };
        }));
      });

      // Result must be an IOrderModelTable[] but is a Observable<IOrderModelTable>[]

      return of(result);
    })
  );

Answer 1

您可以使用 to Array运算符将流转换为数组，但要确保流将结束。 诀窍在于选择正确的流。

对于您的问题，自然 源将是您第一次调用时收到的列表。我可以用一种示意性的方式来表示，你会得到一个 id 列表，然后将其转换为一个增强信息列表:

首先输入...snapshopChanges():

----[A, B, C]------>

每个元素都通过...valueChanges()进行转换:

-------Call A -------------DataA-------->

-------Call B ------------------------DataB----->

-------Call C --------------------DataC----->

然后使用 toArray() 减少到:

----------------------------------------------[DataA, DataC, DataB]-------->

代码:

getDataTableOperatorsFromDB(): Observable<IOrderModelTable[]> { {
  return this.tableOperatorsCollectionsRef.snapshotChanges()
    .pipe(
      map(actions => {
        from(data).pipe(
          map(action => {
            const data = a.payload.doc.data() as IOrdersModelDatabase;
            const id = a.payload.doc.id;
            data.ot = id;
            return data;
          }),
          mergeMap(element => {
            return this.afs.collection('Orders/').doc(element.orderNumberReference.id).valueChanges().pipe(
              map(order => {
                return {
                  otNumber: element.ot,
                  clientName: '',
                  clientReference: order.clientReference,
                  id: element.orderNumberReference,
                };
              })
            );
          }),
          toArray()
        );
         
      })
    )
}

重要:我用mergeMap替换了switchMap，否则一些信息可能会被丢弃。