Question

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

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

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

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

Answer 1

但是在我的应用中，Foos 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

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

1 个答案: