Observable Array of Observables - 如何在 RxJS 中实现？

Question

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

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

但在我的应用程序中，不仅 Foos 数组可以接收更新，而且每个单独的 Foo 都可以在不影响数组的情况下接收更新。我该如何设计这个？我是否将每个单独的 Foo 包装在一个 Observable 中，使我的 FooService return 成为 BehavioralSubject<Array<BehavioralSubject<Foo>>>？这看起来很乱。我是否继续 return a BehavioralSubject<Array<Foo>>，并在每次 Foo 更新时重新呈现整个 Array 组件？这将 Foo 更新与 Array 更新紧密绑定，防止我在应用程序的其他部分重用我的 Foo 组件。

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

Answer 1

But in my app, not only can the Array of Foos receive updates, but each individual Foo can receive updates without affecting the 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[]>([]);

然后创建一个函数，returns 一个要在您的模板中使用的 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

Observable Array of Observables - 如何在 RxJS 中实现？

Observable Array of Observables - How to implement in RxJS?

observable

rxjs

reactivex

angular