RxJS zip/merge/forkJoin/concat操作符异常行为原因咨询

先明确你的场景前提：doneItems和cancelledItems都是从allItems派生的Observable，各自会发射单个数组值（比如doneItems发出[{name: 'Swim', status: 'done'}]，cancelledItems发出[{name: 'Bike', status: 'cancelled'}]）。下面逐个分析四个操作符的行为差异：

1. merge操作符的问题 #

merge会把多个Observable的发射值按产生顺序逐个输出，但Angular的async管道只会保留最后一次发射的结果。如果doneItems和cancelledItems各发射一次数组，merge会先输出其中一个数组，再输出另一个，最终async管道只会显示最后输出的那组数据，所以Terminal列只能看到其中一项。

2. forkJoin操作符的问题 #

forkJoin的触发条件是所有传入的Observable都完成，才会把每个Observable的最后一个值合并返回。但你的doneItems和cancelledItems是从持续存在的Observable（比如BehaviorSubject）派生的，它们不会自动完成，所以forkJoin永远不会发射任何值，Terminal列自然没有数据。

3. concat操作符的问题 #

concat会按顺序订阅Observable，只有前一个Observable完成后，才会订阅下一个。如果第一个Observable（比如doneItems）没完成，concat就不会订阅第二个（cancelledItems），所以你只能看到第一个Observable的内容；即便第一个完成了，也只会依次显示两组数据，不会合并成一组展示。

4. zip操作符符合预期的原因 #

zip会等待所有传入的Observable都发射了对应位置的值，再把这些值合并成一个数组发射。在你的场景里，doneItems和cancelledItems各发射了一次数组，zip会把这两个数组合并成一个新数组（比如[[Swim], [Bike]]），你可以通过展开操作（比如...）把它们合并为一个完整列表，async管道就能拿到合并后的所有项，所以Terminal列能同时显示Swim和Bike。

注意：zip是按发射顺序配对的，如果后续doneItems新增项，zip会等待cancelledItems也新增项才会再次合并，这在当前Todo场景刚好匹配需求，但如果是动态新增单个项的场景，可能需要改用combineLatest来实时合并两组数据。

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