代码之家 › 专栏 › 技术社区 › Cornelis

如何将一个可观测项添加到另一个可观测项的数组中?

rxjs6 typescript2.0

0

Cornelis · 技术社区 · 6 年前

我正在努力使用Observable和Pipes,在这里我想将一个Observable项添加到另一个Observable项,其中包含相同类型的项列表。

我有x型。x型我有一个可观测的数组:

readonly arrayOfx$: Observable<X[]>;

我也只能观察到X型:

private readonly _x$: Observable<UpdateOfX>;

interface UpdateOfX {
    x: X,
    updateState: "Add" | "Modified" | "Removed"
}

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

在前端,必须将此项添加到已检索到的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[]?
        })
    );
}

由于使用了signaler,因此当创建了一个x类型的新项时,当客户端接收到该项时,后端处于控制状态。

1 回复 | 直到 6 年前

1

0

CozyAzure 6 年前

你可以使用 combineLatest() ,并在收到这两种排放物后立即执行您想要的任何操作:

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

不确定这是否是设计的,但是让前端(客户机)处理数据的问题并不是那么理想。你唯一的真相来源现在是基于你的客户机,不同的机器有不同的处理速度,可能导致细微差别和不一致的显示。另外,代码在某种意义上是混乱的,您现在需要检查整个 arrayOfX 每一次 singleOfX 更新-需要检查它是否存在于当前列表中,如果存在,则编辑/删除;否则,追加到列表中。如果用户意外刷新浏览器怎么办?你失去了所有的处理过程。

因为您已经在使用signaler,所以最好让服务器处理所有数据,让服务器成为唯一的真相来源。然后您只需要订阅一个hub并收听 阿雷福克斯 ;而且几乎不关心单个更新。