RxJs concat操作符结合Async Pipe无法正常工作求助

问题根源 #

concat操作符的作用是按顺序订阅多个Observable，依次发射每个Observable的单个值，而非将所有值打包成数组。这直接导致了你的问题：

• 用{{concat$ | async}}时，async管道会在每次收到新值时更新视图，最终仅显示最后一个发射的9；
• 用*ngFor时，因为每次绑定的是单个数字（而非数组这类可迭代对象），所以触发“无法找到支持数字类型的differ”错误。

而手动订阅能看到1到9，是因为订阅的next回调会响应每一次值的发射，逐个输出——这和async管道“仅将最后一次发射的值绑定到视图”的行为完全不同。

解决方案 #

根据需求不同，有两种常见处理方式：

1. 等待所有值发射完成后显示完整数组

使用toArray()操作符，它会收集concat发射的所有值，直到源Observable全部完成，再发射一个包含所有值的数组：

import { concat, of } from 'rxjs';
import { toArray } from 'rxjs/operators';

// 示例源Observable
obs1$ = of(1,2,3);
obs2$ = of(4,5,6);
obs3$ = of(7,8,9);

concat$ = concat(this.obs1$, this.obs2$, this.obs3$).pipe(toArray());

此时模板中的*ngFor="let x of concat$ | async"可正常遍历数组，{{concat$ | async}}会显示完整的[1,2,3,4,5,6,7,8,9]。

2. 实时显示每个新发射的值

如果不想等待所有值发射完成，而是每发射一个值就新增到视图中，可用scan操作符逐步构建数组：

import { concat, of } from 'rxjs';
import { scan } from 'rxjs/operators';

concat$ = concat(this.obs1$, this.obs2$, this.obs3$).pipe(
  scan((acc, current) => [...acc, current], [])
);

这样每次发射一个值，数组就会新增该元素，视图会实时更新，逐步显示1、1-2、1-3……直到完整的1-9序列。

内容的提问来源于stack exchange，提问作者Abhishek