在管道中使用扩展替换值

Question

我目前有一项服务，我可以借助展开来获取一些模板以在视图中显示它们。我的想法是继续获取直到我拥有所有东西。

但是，当我通过管道扩展时，它会替换值而不是添加它们，我该如何解决这个问题？

示例：

templates$: Observable<Template[]>;
let count = 0;

this.templates$ = this.templateService.getTemplates(0, 5).pipe(
      expand(result => {
        count += result.length;
        if (result.length === 5) {
          return this.templateService.getTemplates(count, 5);
        } else {
          return empty();
        }
      })
    );

Answer 1

expand 不会替换值，它会在您每次收到五个一组的模板时发出。在您看来，如果您使用 template$ | async，您只会看到最后的结果。

要收集所有模板，您可以使用 scan 运算符。

templates$: Observable<Template[]>;
let count = 0;

this.templates$ = this.templateService.getTemplates(0, 5).pipe(
      expand(result => {
        count += result.length;
        if (result.length === 5) {
          return this.templateService.getTemplates(count, 5);
        } else {
          return empty();
        }
      }),
      scan((acc, curr) => acc.concat(curr))
    );

如果您不想显示中间结果，您也可以以相同的方式使用 reduce 运算符。

在管道中使用扩展替换值

Using expand in pipe replaces values

angular

typescript

rxjs

observable

expand