使用 RxJs 显示动画计数

Question

在我的 Angular 应用程序中，我想显示来自 HTTP get 请求的记录的动画计数。我使用 RxJs，但响应返回得非常快，我只能看到我请求的最终结果。我试图增加 clientsCount 并将其显示在视图中。我怎样才能放慢一点，以便可以看到随着请求的进行，数字是如何逐渐增加的。

this.clients$ = this.clientService.getClients()
  .pipe(
    tap(e => console.log(e)),
    map(clients => {
      return clients
        .map((client) => { this.clientsCount++; return client })
        
    }),
    finalize(() => { this.isLoading = false; console.log('HJJHJG') }),
    catchError((err) => { this.isLoading = false; throw err }));

Answer 1

在这里，让我de-clutter你的代码：

this.clients$ = this.clientService.getClients().pipe(
  tap(console.log),
  tap(clients => clients.forEach(client => this.clientsCount++)),
  finalize(() => { this.isLoading = false; console.log('HJJHJG') }),
  tap({error: err => this.isLoading = false})
);

您可能会注意到一些有趣的事情，您使用的所有运算符都不会执行任何转换（RxJS 的面包和黄油）。他们都只是发挥副作用。

让我们看看这行代码：

clients.forEach(client => this.clientsCount++)

这个循环将运行同步。这在语义上与：

this.clientsCount += clients.length

我不确定你希望放慢什么。

this.clientService.getClients() 是否发出多个客户端？您可以像这样使用 zip 和 timer 展开它：

const clientService$ = this.clientService.getClients().pipe(
  tap(console.log),
  tap(clients => this.clientsCount += clients.length),
  finalize(() => { this.isLoading = false; console.log('HJJHJG') }),
  tap({error: err => this.isLoading = false})
);

this.clients$ = zip(clientService$, timer(0,1000)).pipe(
  map([cs] => cs) // Remove timer info
);

如果您想将客户群变成客户流，可以这样做：

this.clients$ = this.clientService.getClients().pipe(
  tap(console.log),
  concatMap(clients => zip(clients, timer(0,1000)),
  map([cs] => cs), // Remove timer info
  tap(() => this.clientsCount++),
  finalize(() => { this.isLoading = false; console.log('HJJHJG') }),
  tap({error: err => this.isLoading = false})
);

使用 RxJs 显示动画计数

Show animated counting with RxJs

rxjs

angular