поиск по ключу вверх вместо удара ввести

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> 

Поиск работы в порядке, но только тогда, когда я нажимаю на войти или backspace, но вместо этого я хочу искать на каждом нажатии клавиши (для a, b и т. д.)

Как это сделать?

Answer 1

Bind поле ввода со свойством в компоненте, используя [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> 

Answer 2

Не уверен, но проблема может быть связана с #input шаблон переменной. вы могли бы использовать [(ngModel)] вместо, как показано ниже,

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

Теперь, когда вы печатаете, он должен обновить результат.