javascript - 从文档引用数组中获取 firestore 文档

Question

目前，我正在处理一组相当复杂的 firestore 查询。

我试图同时填充一个包含对其他文档的引用的数组，然后读取这些文档并将信息放入一个数组中。

更具体地说，我在一个集合中有 4 个引用。我想获取这些引用，然后使用这些引用查询 4 ​​个文档并用信息填充一个数组。

顺序如下:查询tags子集合中的所有文档，由下面的函数处理:

getTagsOnPage(workspaceId: string, pageId: string) {
    // get all of the references in the tags sub-collection, and puts them in an array
    // get all id's, do not get data
    return this.afs
      .collection("users")
      .doc(`${auth().currentUser.uid}`)
      .collection<Workspace>("workspaces")
      .doc(`${workspaceId}`)
      .collection<Page>("pages")
      .doc(`${pageId}`)
      .collection("tags")
      .snapshotChanges()
      .pipe(
        map((actions) => {
          return actions.map((a) => {
            const ref = a.payload.doc.get("reference");
            return ref; // return an array of (id: reference) key-value pairs
          });
        })
      );
  }

这适用于执行订阅的以下代码:

this.pageService
      .getTagsOnPage(this.workspaceId, this.currentPage.id)
      .subscribe((data) => {
        temp = data;
      });

数据如下，通过控制台:

(3) ["/users/ucB5cF4Pj3PWhRn10c9mvqQbS7x2/workspaces/It1…1tSnPI5GJrniY82vZL/localTags/1p5Tscwn14PyK6zRaFHX", "/users/ucB5cF4Pj3PWhRn10c9mvqQbS7x2/workspaces/It1tSnPI5GJrniY82vZL/localTags/lFKoB0jngmtnALut2QS2", "/users/ucB5cF4Pj3PWhRn10c9mvqQbS7x2/workspaces/It1tSnPI5GJrniY82vZL/localTags/r6sf2SX6v87arU2rKsD5"]

现在，执行下一组数据读取是我开始困惑的地方。

我最初的方法是尝试 for 循环(针对此数组的长度)，但这将涉及迭代执行多个嵌套订阅，我认为从这个意义上讲这是不可能的。

我是 rxjs 的新手，只使用过 map 和 switchMap 运算符。在这种情况下，我想我会使用 mergeMap 和/或 flatMap, 之类的东西，但坦率地说，我不确定在这种情况下如何进行这项工作。此外，处理 for 循环时我需要根据我得到的 documentReferences 数组获取文档，这也让我陷入了循环。

这是我目前的实现，到处都是；我希望对我正在尝试做的事情有感觉。基本上，通过 getTagsOnPage 获取引用数组，等待 observable 结束，使用 switchMap 获取数据数组并对其进行循环；理想情况下，订阅每个 ref 并添加到 tagData，然后返回:

let tagData;
    this.pageService.getTagsOnPage(this.workspaceId, this.currentPage.id).pipe(
      switchMap((data) => {
        let references = data;
        for (let j = 0; j < references.length; j++) {
          let ref = this.afs.doc(`${references[j]}`);
          ref.snapshotChanges().pipe(
            map((actions) => {
              const data = actions.payload.data();
              tagData.push(data);
            })
          );
          // push the data (different data var)
        }
      })
    );
    return tagData;

我知道这很困惑，但我认为一旦我知道了正确的运算符来使用它就会更有意义。

此外，atm 这会返回一个空数组。当我使用 switchMap 时出现以下错误:

Argument of type '(data: any[]) => void' is not assignable to parameter of type '(value: any[], index: number) => ObservableInput<any>'.
  Type 'void' is not assignable to type 'ObservableInput<any>'.

感谢您的帮助!

Answer 1

使用 switchMap 时出错的原因是因为您没有返回 Observable。

当使用任何“Higher Order Mapping Operators”(switchMap、concatMap、mergeMap 等)时，所提供的函数必须返回一个可观察对象。如错误所述:“类型 void 不可分配给类型 ObservableInput<any>”，您不会返回任何内容(无效)。

接下来不太正确的是，在循环中，您引用了 ref.snapshotChanges().pipe() ，但您从不订阅它。您可能知道，Observable 是惰性的，除非有订阅者，否则不会触发。

只要你在 switchMap() 中返回一个可观察对象，它将自动订阅它并发出它的值。

让我们换个 Angular 思考这个问题；而不是遍历第一次调用的结果，执行它们，然后将值插入数组。相反，我们可以获取结果并将它们变成一个可观察的流，该流发出它们各自调用的所有结果，并为您将它们组合成一个数组。但是......有一个细微的差别:我建议不要有一个单独的 tagData流外的数组，但要让您的可观察对象返回 tagData您需要的表格 Observable<TagData[]> .

我认为这样的事情对你有用:

tagData$ = this.pageService.getTagsOnPage(this.workspaceId, this.currentPage.id).pipe(
    switchMap(references => from(references)),
    mergeMap(ref => this.afs.doc(ref).snapshotChanges()),      
    map(actions => actions.payload.data()),
    scan((allTagData, tagData) => [...allTagData, tagData], [])
  })
);

让我们分解一下!

1. 我们使用 from 从您的数组创建一个可观察对象，一次发出每个“引用”。

2. mergeMap 将订阅我们正在创建的可观察对象并发出其排放量

3. map 简单地将值转换为您想要的形状

4. scan 为您累积排放量并在每次更改时排放。如果您不想在所有调用返回之前发出信号，请使用 reduce() 相反

现在，你可以简单地做:tagData$.subscribe()并用结果数组做你想做的事。或者你甚至可以使用 async pipe在您的模板中而不是在您的组件中订阅。