Filtraggio di una matrice angolare2

Question

Sto cercando come filtrare una matrice di dati in Angular2.

Ho esaminato l'utilizzo di un tubo personalizzato, ma ritengo che questo non sia quello che sto cercando, poiché sembra più orientato verso trasformazioni di presentazione semplici piuttosto che filtrare grandi serie di dati.

La matrice è impostato come segue:

getLogs(): Array<Logs> { 
     return [ 
      { id: '1', plate: 'plate1', time: 20 }, 
      { id: '1', plate: 'plate2', time: 30 }, 
      { id: '1', plate: 'plate3', time: 30 }, 
      { id: '2', plate: 'plate4', time: 30 }, 
      { id: '2', plate: 'plate5', time: 30 }, 
      { id: '2', plate: 'plate6', time: 30 } 
     ]; 
    } 

voglio filtrare questo id. Quindi quando inserisco "1" in una barra di ricerca, si aggiorna per visualizzare i valori corrispondenti.

Se c'è un metodo su come farlo, mi piacerebbe saperlo!

Answer 1

Non c'è modo di farlo con un tubo di default. Ecco l'elenco delle pipe supportate per impostazione predefinita: https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.ts.

Detto questo si può facilmente aggiungere una tubazione per tale caso d'uso:

import {Injectable, Pipe} from 'angular2/core'; 

@Pipe({ 
    name: 'myfilter' 
}) 
@Injectable() 
export class MyFilterPipe implements PipeTransform { 
    transform(items: any[], args: any[]): any { 
     return items.filter(item => item.id.indexOf(args[0]) !== -1); 
    } 
} 

e usarlo:

import { MyFilterPipe } from './filter-pipe'; 
(...) 

@Component({ 
    selector: 'my-component', 
    pipes: [ MyFilterPipe ], 
    template: ` 
    <ul> 
     <li *ngFor="#element of (elements | myfilter:'123')">(...)</li> 
    </ul> 
    ` 
}) 

Spero che ti aiuta, Thierry

Answer 2

Ho uno scenario simile in uno dei miei campioni

<input "(keyup)="navigate($event)" /> 

<div *ngFor="#row of visibleRows"></div>  

...... 

navigate($event){ 
     this.model.navigate($event.keyCode); 
     this.visibleRows = this.getVisibleRows(); 
} 

getVisibleRows(){ 
    return this.model.rows.filter((row) => row.rowIndex >= this.model.start && row.rowIndex < this.model.end); 
} 

Il mio approccio è quello di ricalcolare la matrice su qualche evento di qualificazione. Nel mio caso è la chiave. Potrebbe sembrare conveniente associare una funzione o un filtro, ma è preferibile collegarsi direttamente alla matrice. Questo perché il rilevamento delle modifiche verrà confuso poiché la funzione/filtro restituirà una nuova istanza di array ogni volta che viene attivato il rilevamento delle modifiche, indipendentemente da ciò che lo ha attivato.

Qui è la sorgente completo: https://github.com/thelgevold/angular-2-samples/tree/master/components/spreadsheet

ho anche una demo: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet