Question

我有这个搜索管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchPipe',
  pure: false
})
export class SearchPipe implements PipeTransform {

  transform(data: any[], search: string): any[] {
    if (data == null){
      return null;
    }

    search = search.toUpperCase();
    return data.filter(x => {
      return (x.firstName.toUpperCase().indexOf(search) !== -1)
...
    });
  }

}

在component.html中我有

<input #input type="text" placeholder="Search" id="search">

<ul class="list-group">
  <li *ngFor="let dt of data | searchPipe: input.value"  class="list-group-item">
    <div class="col-sm-3 col-xs-12 clearfix">

      <span>{{ dt.firstName }} {{ dt.lastName }}</span>

    </div>
    <div class="clearfix"></div>
  </li>
</ul>

搜索工作正常，但只有当我点击输入或退格时，我才想搜索每次按键点击（a，b等）< / p>

我该怎么做？

Answer 1

不确定但 #input 模板变量可能存在问题。您可以使用 [(ngModel)] ，如下所示，

<input  type="text" [(ngModel)]="myValue" placeholder="Search" id="search">
...
<li *ngFor="let dt of data | searchPipe: myValue"  class="list-group-item">
...
...

现在，当您输入时，它应该更新结果。

Answer 2

使用[NgModel]将输入框与组件中的属性绑定，并将其用作过滤器而不是input.value

在您的组件中，创建一个属性

public searchText: string;

并在你的html

中使用它

<input type="text" [(ngModel)]="searchText" placeholder="Search" id="search">

<ul class="list-group">
  <li *ngFor="let dt of data | searchPipe: searchText"  class="list-group-item">
    <div class="col-sm-3 col-xs-12 clearfix">

      <span>{{ dt.firstName }} {{ dt.lastName }}</span>

    </div>
    <div class="clearfix"></div>
  </li>
</ul>

搜索键而不是按Enter键

2 个答案: