javascript - 在 rxjs 中创建树数据 View 的正确方法

Question

我有一组描述实体关系的数据。我的代码:

services
            .tree
            .collection
            .find()
            .$
            .pipe(
                switchMap(from),
                groupBy((value) => value.get('parent_id')),
                mergeScan((memo, group$) => {
                    const key = group$.key;

                    return group$.pipe(
                        map((value) => {
                            if(!(key in memo)) {
                                memo[key] = [];
                            }
                            memo[key].push(value);

                            return memo;
                        })
                    )
                }, {}),
            )
            .subscribe((data) => console.log('data', data));

但不是一个日志而是多个。我怎样才能将所有数据合并到一个管道中以在最后得到一个数据？

Answer 1

我认为 CodeSandbox 中发生了两件事(我无法直接在您桌面上的编辑器中说明发生了什么，因为我看不到您所看到的)。

1. console.log(object) 不会显示对象的值记录时，而是显示一个三 Angular 形，它实际上是指向该对象的指针在您单击它之前不会对其进行实际评估，届时它已被完全填充。要使 console.log 为您提供记录时的值(即:及时的快照)，只需将语句更改为:console.log("数据", JSON.stringify(数据))。有关更多信息，请参见 this question and its answers .
2. 如果您进行更改，您将开始看到真正发生的事情，它正在慢慢构建您正在寻找的东西，并且直到最后一次发射才真正完成，即:当它完成时。这也清楚地表明，您的问题的解决方案是在 mergeScan() 之后添加运算符 last()。

来自 CodeSandbox 的完整代码:

of(incoming)
  .pipe(
    switchMap(from),
    groupBy(value => value.parent_id),
    mergeScan((memo, group$) => {
      const key = group$.key;

      return group$.pipe(
        map(value => {
          if (!(key in memo)) {
            memo[key] = [];
          }
          memo[key].push(value);

          return memo;
        })
      );
    }, {}),
    last()
  )
  .subscribe(data => console.log("data", JSON.stringify(data, null, 2)));