Question

我有一个关于过滤器的问题。我有一个包含搜索框的组件，以及一个显示api数据的组件，它们都有效。但是，我有一个过滤器，应根据用户输入的内容显示数据。当我在搜索框中输入时，我没有收到任何错误，但我也没有得到任何结果。我有点困惑，任何人都可以帮我提出一些想法。

如何在单独的组件上使用管道进行搜索，如何在数据列表的组件上使用管道。？

search.pipe.ts：

       import { Pipe, PipeTransform } from '@angular/core';
            @Pipe({
                 name: 'searchPipe'
             })
            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.name.toLowerCase().inlcudes(search_term.toLowerCase());
            })
          }
      }

}

data.component.html简短版本：

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

search.component.html

<form>
  <div class="mdl-textfield mdl-js-textfield">
    <div class="mdl-select mdl-js-select">
      <select class="mdl-select__input" id="option" name="option">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
        <option value="option3">option 3</option>
        <option value="option4">option 4</option>
        <option value="option5">option 5</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 [(ngModel)]="search_term" name="search_term" (keyup) = "0" />
      <label for="tf1" class="mdl-textfield__label">Search</label>
  </div>
</form>

Answer 1

我认为这对你有用，而不是使用inlcudes，尝试使用indexOf。 E，G

data.name.toLowerCase().indexOf(search_term.toLowerCase());

Angular 2搜索过滤器应用于不同的组件

1 个答案: