açısal 2 filtre Yaşam kullanıcı girişine göre elemanlar mı?

Question

, keyup event her birinin ardından canlı kullanıcı girdisine göre * ngFor kullanılarak yapılan öğeleri filtrelemek için bir eklentidir.

Answer 1

Eklenti gerekli değildir!

iki olası yolları:

• kullanımı bir filtre işlevi ve verilerinizin süzülmüş dizisine sahip

@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); 
    } 
} 

canlı demo (daha iyi performans!): https://plnkr.co/edit/9NtT6Z4RIg4BR1BVfh7r?p=preview

• veya Pipe
kullanarak 0

@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' 
    } 
} 

canlı demo: https://plnkr.co/edit/usgvA1hpqQ06zJxMrx4f?p=preview