角度 rxjs 可观察序列多个订阅者答案

【问题标题】：angular rxjs observable sequence multiple subscribers角度 rxjs 可观察序列多个订阅者
【发布时间】：2018-07-31 16:42:52
【问题描述】：

我有一个从 httpClient GET 调用返回的项目列表，我显示在一个表中，每个项目旁边都有一个复选框。我在标题行还有一个全选复选框。

我想在检查项目时，还有一个显示x items selected的文本组件。还有一次显示 20 个项目，并带有一个分页组件，每次加载新数据。

这就是我的数据的加载方式，每次提供新数据时，我都会覆盖 items$ observable。

this.itemService.get().subscribe((response) => {
    this.items$ = Observable.of(response.data);
    this.pagination$ = Observable.of(response.meta);
});

这是我的全选复选框的模板代码

<input type="checkbox" (change)="toggleSelectAll()">

这是我个人复选框的代码

<input type="checkbox" [checked]="item.selected" [(ngModel)]="item.selected">

这是更改全选复选框时的代码。我用自己覆盖 items$ 可观察对象，但映射每个对象并更改所选状态。

toggleSelectAll() {

    this.selectAll = !this.selectAll;

    this.items$ = this.items$.pipe(map((items: SelectableItem[]) => {
        return items.map((item: SelectableItem) => {
            item.selected = this.selectAll;
            return item;
    });
}));

}

我不知道如何让 x items selected 功能正常工作，我如何共享可观察数据以用于 2 个不同的目的？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

您可以使用 BehaviorSubject 来支持许多订阅者。您可以使用 null 或空数组或您的数据对其进行初始化：

items$ = new BehaviorSubject<SelectableItem[]>([]); // or some initial data if you have it instead of empty array

然后，您可以根据需要多次订阅它。而且每次你得到新的物品$时，你都可以这样做，而不是重新分配它；

this.itemService.get().subscribe((response) => {
    this.items$.next(response.data);
});

【讨论】：