Question

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

我想要一个显示x items selected的文本组件，只要选中一个项目就会更新。{1}}此外，还有20个项目一次显示，每次都会加载新数据的分页组件。

这是我的数据加载方式，每次提供新数据时都会覆盖$ 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">

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

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功能正常工作，如何分享可观察数据以达到两个不同目的？

Answer 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);
});

angular rxjs observable sequence多个订阅者

1 个答案: