угловой фильтр 2 ngFor элементов в соответствии с входом пользователя в жизнь?

Question

является плагином для фильтрации элементов, сгенерированных с использованием * ngFor в соответствии с вводом пользовательского ввода после каждого keyup event?

Answer 1

Планета не требуется!

два возможных пути:

• использовать функцию фильтра и имеют отфильтрованный массив данных

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input (keyup)="search($event.target.value)" /> 
     <div *ngFor="let d of filteredData"> 
     {{ d }} 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    data = [ 
    "val1", 
    "val2", 
    "val3", 
    "val4", 
    "val5", 
    "val6", 
    "test", 
    "huhu" 
    ]; 
    filteredData = this.data; 

    constructor() { 
    this.name = 'Angular2' 
    } 

    search(val: any) { 
    if (!val) this.filteredData = this.data; 

    this.filteredData = this.data.filter(d => d.indexOf(val) >= 0); 
    } 
} 

жить демо (лучше производительность!): https://plnkr.co/edit/9NtT6Z4RIg4BR1BVfh7r?p=preview

• или с использованием Pipe

@Pipe({ name: 'filter' }) 
export class FilterPipe implements PipeTransform { 
    public transform(values: any[], filter: string): any[] { 
    if (!values || !values.length) return []; 
    if (!filter) return values; 

    return values.filter(v => v.indexOf(filter) >= 0); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input [(ngModel)]="filterString" /> 
     <div *ngFor="let d of (data | filter: filterString)"> 
     {{ d }} 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    data = [ 
    "val1", 
    "val2", 
    "val3", 
    "val4", 
    "val5", 
    "val6", 
    "test", 
    "huhu" 
    ]; 

    filterString = ''; 

    constructor() { 
    this.name = 'Angular2' 
    } 
} 

демо: https://plnkr.co/edit/usgvA1hpqQ06zJxMrx4f?p=preview