如何将几个事件组合到RXJS中以检索和过滤数据

Question

我有几个类似的用例，其中显示了数据表。在表旁边有一个用于过滤当前数据的输入字段(搜索清单(。另一个用于过滤后端数据的输入字段(searchbackend(。并且有一个刷新按钮。

<form class="form">
    <label>Local Search</label><input class="form-control" [formControl]="searchLocal">
    <label>Backend Search</label><input class="form-control" [formControl]="searchBackend">
    <button class="btn btn-success" (click)="wfRefresh()">Refresh</button>
</form>
<div>
    <ul>
        <li *ngFor="let order of orders | async">
            {{order.id}} {{ order.customer_name}}
       </li>
    </ul>
</div>

我想要的是以下内容：

• 如果搜索网已更改过滤器(本地(先前检索的数据
• 如果searchbackend更改了从searchbackend和使用搜索网络过滤
• 如果单击刷新按钮，请通过searchbackend获得从后端获取数据，并使用searchLocal(类似于searchbackend(
过滤器

如何使用RXJS完成此操作？如何结合上述三个事件？可能只能通过步骤解决吗？感谢您的帮助。

接下来我有一些不工作！代码刺管对所需功能的大致了解：

orders: Observable<Array<Order>>; // = new Subject<Array<Order>>();
searchLocal = new FormControl();
searchBackend = new FormControl();
constructor(
  private backendService: BackendService,
  private http: HttpClient
) { }
ngOnInit() {
  this.orders = this.searchLocal.valueChanges
      .debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.getLocalOrders(term))
      .map(data => this.filter(data));
  // just for the idea
  this.orders = this.searchBackend.valueChanges
      .debounceTime(800)
      .distinctUntilChanged()
      .switchMap(term => this.getOrders(term))
      .map(data => this.filter(data));
}
filter(data) {
  return data;
}
getLocalOrders(searchString: string): Observable<Array<Order>> {
  return localCopy; // ?
}
getOrders(searchString: string): Observable<Array<Order>> {
  return this.http.post<Array<Order>>('someurl', { filter: searchString });
}
wfRefresh() {
  //
}

Answer 1

这是您可以从概念上实现这一目标的方法：

// This you already had
const frontendSearch$ = this.frontendSearch.valueChanges
  .debounceTime(400)
  .distinctUntilChanged();
// This you already had    
const backendSearch$ = this.backendSearch.valueChanges
  .debounceTime(800)
  .distinctUntilChanged();
// For example, refreshClicked$ could be a Subject on which
// you emit in the onClick handler.
const refresh$ = this.refreshClicked$
  .map(() => this.backendSearch.value);
const filteredOrders$ = Observable.combineLatest(
  // Merge events when changing the backendSearch text or
  // clicking the button
  Observable.merge(backendSearch$, refresh$)
    // Start with an empty search text to immediately start a search
    .startWith("")
    // … and use the value to get the orders from the backend
    .switchMap(value => this.getOrdersFromBackend(value)),
  // Also start the frontendSearch text with an initial value to
  // get going right away
  frontendSearch$.startWith("")
)
  // Now we just need to apply the frontend filtering
  .map(([orders, filterText]) => this.filterOrders(orders, filterText));