可观察的可观察数组 - 如何在RxJS中实现？

Question

我刚刚第一次学习RxJS，所以如果这个问题基于错误的假设，我会道歉。

比方说，我在我的Angular应用程序中有一个返回Array<Foo>的FooService。可以任意地从列表中添加和删除元素。因此，我将我的Foos数组包装在一个RxJS可观察量中; FooService现在返回一个BehavioralSubject<Array<Foo>>。现在我可以使用Angular的AsyncPipe在每次更新BehavioralSubject时自动重新呈现必要的组件。到目前为止，这是微不足道的RxJS 101。

但是在我的应用程序中，Foos阵列不仅可以接收更新，而且每个Foo都可以在不影响阵列的情况下接收更新。我该如何设计这个？我是否将每个Foo包装在Observable中，使我的FooService返回BehavioralSubject<Array<BehavioralSubject<Foo>>>？这看起来很乱。我是否继续返回BehavioralSubject<Array<Foo>>，并在每次Foo更新时重新渲染整个Array组件？这将Foo更新紧密绑定到Array更新，从而阻止我在应用程序的其他部分重用我的Foo组件。

在RxJS中执行此操作的最佳方法是什么？我如何（实际）实现一个（概念）可观察的Observable数组？

Answer 1

但是在我的应用程序中，Foos阵列不仅可以接收更新，而且每个Foo都可以在不影响阵列的情况下接收更新。

这对我来说没有意义。如果你有一个容纳食物的阵列，并且其中一个食物变了，那么阵列就会发生变化。

如果您使用的是ngFor指令，则会优化模板中的更改传播，这样您就不必担心在大多数用例中都会出现大量DOM提升：https://angular.io/api/common/NgForOf#change-propagation

如果您需要更多控制，请查看：https://angular.io/guide/template-syntax#ngfor-with-trackby

现在，在您的服务中，您可以这样做：

private foos = new BehaviorSubject<Foo[]>([]);

然后创建一个函数，返回要在模板中使用的Observable：

get() { 
    return this.foos.asObservable(); 
}

然后你添加逻辑以你喜欢的方式更改foos，例如，添加一个foo：

add(foo: Foo) {
    let arr = this.foos.getValue();
    arr.push(foo);
    this.foos.next(arr);
}

改变一个foo：

change(index: number, foo: Foo) {
    let arr = this.foos.getValue();
    arr[index] = foo;
    this.foos.next(arr);
}

然后，在您的组件中，使用fooService.get() | async