Observable 的 Observable 数组 - 如何在 RxJS 中实现？

Question

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

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

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

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

Answer 1

但是在我的应用中，不仅 Foo 数组可以接收更新，而且每个单独的 Foo 都可以在不影响数组的情况下接收更新。

这对我来说没有意义。如果您有一个包含 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