web-dev-qa-db-fra.com

Filtrer un tableau dans angular2

Je cherche comment filtrer un tableau de données dans Angular2.

J'ai envisagé d'utiliser un canal personnalisé, mais j'estime que ce n'est pas ce que je recherche, car il semble plus adapté aux simples transformations de présentation qu'à le filtrage de grands ensembles de données.

Le tableau est présenté comme suit:

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

Je veux filtrer ceci par id. Ainsi, lorsque je saisis "1" dans une barre de recherche, il se met à jour pour afficher les valeurs correspondantes.

S'il y a une méthode sur la façon de faire ceci, j'aimerais savoir!

arraystypescriptpipefilteringangular
20
Witted

Il n'y a aucun moyen de le faire en utilisant un canal par défaut. Voici la liste des canaux pris en charge par défaut: https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.ts .

Cela dit, vous pouvez facilement ajouter un tuyau pour un tel cas d'utilisation:

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

Et utilisez-le:

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

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

J'espère que ça vous aide, Thierry

36
Thierry Templier

J'ai un scénario similaire dans l'un de mes échantillons

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

Mon approche consiste à recalculer le tableau lors de certains événements qualificatifs. Dans mon cas, c'est keyup. Il peut sembler pratique de se lier à une fonction ou à un filtre, mais il est recommandé de se lier directement au tableau. En effet, le suivi des modifications deviendra confus, car la fonction/le filtre renverra une nouvelle instance de tableau chaque fois que le suivi des modifications est déclenché, quel que soit le déclencheur.

Voici la source complète: https://github.com/thelgevold/angular-2-samples/tree/master/components/spreadsheet

J'ai aussi une démo: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

5
TGH