Angular 按向上键搜索，而不是按enter键

我有这根管子要找

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>

{{dt.firstName}{{dt.lastName}}

搜索工作正常，但仅当我点击输入或退格时，我希望在每次按键点击时搜索（a、b等）

---

我该怎么做？

不确定，但问题可能出在

#输入

模板变量上。您可以使用

[（ngModel）]

代替，如下所示

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

...

...
...

---

现在，当您键入时，它将更新结果。

使用[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>

{{dt.firstName}{{dt.lastName}}

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