如何将一个可观察项添加到不同可观察项中的一组项中

Question

我很难使用可观察项和管道，因为我想将一个可观察项添加到另一个包含相同类型项列表的可观察项。

我有X型。在X型中，我有一个可观察的阵列：

readonly arrayOfx$: Observable<X[]>;

我也有一个只能观察到的类型X：

private readonly _x$: Observable<UpdateOfX>;
interface UpdateOfX {
x: X,
updateState: "Add" | "Modified" | "Removed"
}

所有这些代码都在一个服务类中，服务应该只公开X的数组。数组中的数据我想用异步管道显示在我的html中，这部分功能正常工作。主机和客户端使用signalR技术连接，在connected上，检索X类型的项数组。但随着应用程序的运行，在后端可以创建X类型的新项目，可以更改或删除现有项目，当这种情况发生时，只有该项目将通过signalR连接和修改状态发送。

在前端，必须将此项添加到已经检索到的X类型项的数组中。在服务中，使用了管道技术，我的问题是，如何将稍后获得的单个项添加到先前检索到的项列表中？

constructor() {
this.arrayOfx$ = this._someSignalRHelperService.retrieveMultipleItems$.pipe(
tap((xArray: X[]) => console.log(xArray)), 
//can I somehow get the a later created x from the server here...
);
this._x$ = this._someSignalRHelperService.retrieveOneItem$.pipe(
tap((updateOfX: UpdateOfX) => console.log(updateOfX)),
map((updateOfX: UpdateOfX) => {
//process the updateState
//... or must I do something here to get x into x[]?
})
);
}

由于使用SignalR，当客户端接收到类型为X的新项目时，后端处于控制之中。

Answer 1

您可以使用combineLatest()，并在接收到两个发射后立即执行您想要的任何操作：

constructor() {
this.combinedOfX$ = combineLatest(
this._someSignalRHelperService.retrieveMultipleItems$,
this._someSignalRHelperService.retrieveOneItem$
).pipe(
map(([singleOfX, multipleOfX]) => {
// do your adding or mapping and whatever here.
})
)
}

不确定这是否是设计的，但让前端(客户端(处理数据的问题并不那么理想。你的单一真相来源现在是基于你的客户，不同的机器有不同的处理速度，可能会导致细微差别和不一致的显示。此外，从某种意义上说，代码会很混乱，每次更新singleOfX时，您都需要检查整个arrayOfX——您需要检查它是否存在于当前列表中，如果存在，请编辑/删除；否则，追加到列表中。如果用户不小心刷新了浏览器，该怎么办？您丢失了所有处理。

由于您已经在使用SignalR，因此更可取的做法是让服务器处理所有数据，并让服务器成为唯一的真相来源。然后，您只需要订阅一个集线器并收听arrayOfX的更改；而且几乎不关心单个更新。