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());

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

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());

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

所以说this.filteredTests的类型为Observable<TestType>。然后map会从TestType到TestType执行一项功能，但您传递的内容为TestType到Observable<TestType>，因为this.filteredTests.slice()显然是Observable。< / p>

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

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

1 个答案: