arrays - from - typescript filter function example

Filtrado de una matriz en angular2

Question

Estoy investigando cómo filtrar una matriz de datos en Angular2.

Busqué un tubo personalizado, pero creo que esto no es lo que estoy buscando, ya que parece estar más orientado a transformaciones de presentación simples en lugar de filtrar grandes conjuntos de datos.

La matriz se establece de la siguiente manera:

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 }
        ];
    }

Quiero filtrar esto por id. Entonces, cuando ingreso "1" en una barra de búsqueda, se actualiza para mostrar los valores correspondientes.

¡Si hay un método sobre cómo hacer esto, me encantaría saberlo!

Answer 1

No hay manera de hacerlo usando una tubería por defecto. Aquí está la lista de tuberías compatibles de forma predeterminada: https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.ts .

Dicho esto, puede agregar fácilmente una tubería para tal caso de 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);
    }
}

Y úsalo:

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

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

Espero te ayude, Thierry

Answer 2

Tengo un escenario similar en una de mis muestras.

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

Mi enfoque es recalcular la matriz en algún evento calificador. En mi caso es keyup. Puede parecer conveniente enlazar a una función o filtro, pero se recomienda enlazar a la matriz directamente en su lugar. Esto se debe a que el seguimiento de cambios se confundirá ya que la función / filtro devolverá una nueva instancia de matriz cada vez que se active el seguimiento de cambios, independientemente de lo que lo activó.

Aquí está la fuente completa: https://github.com/thelgevold/angular-2-samples/tree/master/components/spreadsheet

También tengo una demostración: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet