Angular: 基于可观察的多重过滤

Question

我有以下输入：

<form *ngIf="tests.length">
    <md-form-field class="whitePlaceholder" floatPlaceholder="never">
      <input mdInput placeholder="Find Tests..." [formControl]="testCtrl"
      class="whitePlaceholder">
    </md-form-field>
  </form>

输入负责在列表中按名称过滤测试：

<md-list-item *ngFor="let test of filteredTests | async">
</md-list-item>

我运行从我的 API 完成加载测试后的以下代码：

this.filteredTests = this.testCtrl.valueChanges
        .startWith(null)
        .debounceTime(250)
        .map(name => name ? this.filterTests(name) : tests.slice());

效果很好，但现在我添加了另一个过滤器：用户可以 select 从单选按钮中选择一个选项。这是负责按选中按钮过滤的方法：

updateList($event) {
    if ($event.value === 'all') {
      this.filteredTests = Observable.of(this.tests);
    } else {
      this.filteredTests = this.filteredTests
        .map((test) => test ? this.filterTestsStatus($event.value) : this.filteredTests.slice());
    }
  }

问题： 当用户单击单选按钮以按其中一个选项进行筛选时，filteredTests 变量被覆盖并且上面提到的测试名称搜索输入停止正在工作。

问题：如何让我的应用程序使用我的名字过滤器和我的单选选项过滤器而不是覆盖我的filteredTests？

Answer 1

这些行真的正确吗？

this.filteredTests = this.filteredTests
    .map((test) => test ? this.filterTestsStatus($event.value) : this.filteredTests.slice());

不知道你为什么不在这里使用 TypeScript，因为它会有很大帮助，但我认为这里的类型不匹配。

所以说 this.filteredTests 是类型 Observable<TestType>。然后 map 接受一个从 TestType 到 TestType 的函数，但是你传递的是 TestType 到 Observable<TestType> 因为 this.filteredTests.slice() 显然是一个 Observable.

我不完全确定您要做什么，因为您似乎在将 tests 映射到 tests 的 Observables。您希望 slice() 在这里做什么？

Angular: 基于可观察的多重过滤

Angular: observable-based multi filtering

angular2-observables

angular