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

Question

我只是第一次学习 RxJS，所以如果这个问题是基于错误的假设，我深表歉意。

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

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

在 RxJS 中最好的方法是什么？我如何（实际上）实现一个（概念上的）Observable 的 Observable 数组？

Answer 1

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

这对我来说没有意义。如果您有一个包含 foos 的数组，并且其中一个 foos 发生了变化，那么该数组本身就会发生变化。

如果您使用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