Angular 2 - 使用下拉选项搜索管道过滤器

Question

我有一个默认为我的数据集名称的管道。

在我的搜索字段旁边，我有一个下拉列表，其中包含我想要搜索的选项列表。

例如，我希望能够按数据名称，日期，任务等进行搜索。所以当我点击＆＃34; Mission＆＃34;从下拉框中，我在搜索框中输入的任何字符串都将显示基于任务的数据。

以下是一些有用的代码片段：

//search-pipe
export class SearchPipe implements PipeTransform {
  transform(data: any, search_term: any): any {
      if (search_term === undefined) return data;

      else {
        return data.filter(function (data){
              return data.mission.toLowerCase().includes(search_term.toLowerCase());
        })
      }
  }


//where I apply the filter

<tbody *ngFor="let test of abtest | searchPipe:search_term">...</tbody>

//search box with drop down

<form>
  <div class="mdl-textfield mdl-js-textfield">
    <div class="mdl-select mdl-js-select">
      <select class="mdl-select__input"
              id="option"
              name="option"
              #select
        <option *ngFor="let option of options" [value]="option">{‌{option}}</option>
      </select>
    </div>
      <i class="mdl-textfield__icon material-icons">search</i>
      <input id="tf1"
             type="text"
             class="mdl-textfield__input mdl-shadow--2dp"
             #input
             (input) = "update.emit(input.value)"
             (keyup)="0" />
      <label for="tf1" class="mdl-textfield__label">Search</label>
  </div>
</form>

//app.html
<app-search (update)="search_term =$event"></app-search>
<app-show-data [search_term]="search_term"></app-show-data>