时间戳

首页 > 解决方案 > 当条件发生变化时重新运行管道以进行观察（Angular 7）

angular - 当条件发生变化时重新运行管道以进行观察（Angular 7）

问题描述

我有一个表，我正在根据用户输入的字段进行过滤，该表的源是由 BehaviorSubject 制成的可观察对象。这是设置：

class Component {
    //filled with a http call to a webservice
    private subject$ = new BehaviorSubject([])
    public state = 'Open';
    public workOrders$ = this.subjects$.asObservable().pipe(map(orders => {
        return orders.filter(f => f.State == this.state)
    }));
}

正在重复的 tr 的 HTML 是

<tr *ngFor="let order of workOrders$ | async">

以及状态输入字段的 HTML

<input type="text" [(ngModel)]="state" />

在初始加载时，这会按状态正确过滤所有工作订单，但是每当this.state发生更改时，我希望该管道重新过滤数组以更新表。完成此类任务的最佳实践是什么？我不想改变主题，因为我需要保留原始数据集以供再次更改过滤器时使用。

标签： angularrxjs

解决方案

您可以使用 rxjs combineLatest函数并有一个可观察的跟踪需要重新计算：

private subject$ = new BehaviorSubject([])
public state = 'Open';
public stateSubject = new BehaviorSubject(this.state);

public workOrders$ = combineLatest(
    this.subjects$,
    this.stateSubject,
    (orders, state) => {
        return orders.filter(f => f.State == state)
    }
);

然后根据您的输入：

<input type="text" (ngModelChange)="stateSubject.next($event)" [(ngModel)]="state" />

推荐阅读