Question

我有3个条件数字下拉列表，其值为-1; 0; 1;和我需要根据下拉列表过滤的Observable<Thing[]>数据源。我需要根据下拉列表显示或隐藏特定行：

1. 保留所有项目（无过滤器）（-1）
1. 仅筛选没有特定字段（或字段为空）（0）
1. 仅过滤具有特定字段（1）

我正在尝试弄清楚如何连接过滤器和我的下拉列表，以便根据我要显示的相关项目的特定值。

dataSource$ = originalDataSource$.filter((item:any) => { 
 // check the conditions here
});

有什么想法吗？

Answer 1

使用当前选定的值创建observable，可以是：

var dropDownElement = document.getElementById('dropDown');
var dropDownValue$ = Observable
  .fromEvent(dropDownElement, 'change')
  .map(e => e.target.value)
  .startWith(dropDownElement.value);

然后映射过滤谓词并将其与原始数据源组合：

var filterPredicate$ = dropDownValue$.map(dropDownValue => {
  if (dropDownValue == 0) return element => {…};
  if (dropDownValue == 1) return element => {…};
  return () => true;
});

var dataSource$ = Observable.combineLatest(
  filterPredicate$, originalDataSource$, 
  (predicate, data) => data.filter(predicate)
);

RxJS 3条件滤波器

1 个答案: