Question

自从开始使用Observable（不是AngularJS）和Angular以来，我一直对rxjs感到困惑。

Observable方便并且提供了一种组织信息的FP方式。但是，与常规值混合使用时会变得非常麻烦。

例如，假设我们有一个数据表，其中的每一行都有一个复选框，并且标题行中有一个“全选”复选框。一个非常常见的用例。

数据表的数据源是Observable。因此伪代码将类似于：

// sample.component.ts, suppose data source comes from ngrx store
rows$ = this.store.pipe(select(selectRows)); 
// sample.component.html
<table [dataSource]="rows$">

通过此设置，我们可以如下实现每个数据行的复选框，以本地状态存储开/关状态：

// sample.component.ts
state = { selection: {} };
handleSelect(id, event) {
    this.state.selection[id] = event.checked;
}

现在是问题所在：

为了计算“是否全部选中”状态，我需要同时知道rows$和this.state.selection，以便知道是否选择了所有行。但是rows$是Observable，而this.state.seletion是常规对象。我的选择是：

a）通过创建this.state.selection将Observable转换为rxjs.Subject，并在每个handleSelect()事件处理程序中更新其值，然后将新的Observable与rows$计算“所有选定”状态

b）订阅rows$并将其转换为常规数组rows，然后在all selected中计算handleSelect()状态
当用户单击“全选”复选框时，我需要更新this.state.selection以将所有ID分配给true或false。同样，必须从rows$的{{1}}中检索所有ID。因此，还有两种选择：

a）将“全选”事件转换为Observable，然后将其与Observable合并并更新rows$作为副作用

b）与1.b）相同，将this.state.selection订阅到rows$，并在rows处理程序中进行计算

对我来说，最简单的方法似乎是先将handleSelectAll()转换为rows$，然后在组件中根本不使用rows。因为要使用Observable，我需要将其他所有内容（状态，事件等）转换为Observable。

但是，如果我是对的，为什么Observable仅提供ngrx接口？

所以我相信我在想错了。

我很高兴有人能对此发表一些看法。

Answer 1

好吧，我的想法再详细一点：

<table [dataSource]="rows$ | async">

如果您不想这样做，则可以在组件中订阅可观察对象（在将其传递到 dataSource @Input之前）。

请注意，订阅可观察项将导致您应在OnDestroy生命周期挂钩中取消订阅。

subscription: any;
ngOnInit() {
 this.subscription = this.rows$.pipe(take(1)).subscribe((result) => {
 this.rows = result;
 }); 
}

ngOnDestroy() {
this.subscription.unsubscribe();
}

您可以在此处找到更多信息：https://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/我可能会选择异步管道，因为这是最简单的方法。

如何从可观察值或常规值中选择

1 个答案: