在 rxjs 中创建树数据视图的正确方法

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 中发生了两件事（我无法直接在您桌面上的编辑器中说明发生了什么，因为我看不到您所看到的内容）。

console.log(object) 不会显示对象的值 当它被记录时 ，而是显示一个三角形，它实际上是指向那个对象的指针在您单击它之前它不会实际计算，届时它已被完全填充。要使 console.log 为您提供记录时的值（即：及时的快照），只需将语句更改为：console.log("data", JSON.stringify(data))。 .
如果您进行更改，您将开始看到真正发生的事情，它正在慢慢构建您正在寻找的东西，并且直到最后一次发射才真正完成，即：当它完成时。这也清楚地表明，您的问题的解决方案是在 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)));

在 rxjs 中创建树数据视图的正确方法

Right way to create a tree data view in rxjs

javascript

rxjs

rxjs6