it-swarm.com.de

Filtern eines Arrays in angle2

Ich untersuche, wie man ein Array von Daten in Angular2 filtert.

Ich habe versucht, eine benutzerdefinierte Pipe zu verwenden, aber ich bin der Meinung, dass dies nicht das ist, wonach ich suche, da es eher auf einfache Präsentationstransformationen ausgerichtet zu sein scheint, als auf das Filtern großer Datenmengen.

Das Array ist wie folgt aufgebaut:

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

Ich möchte dies nach ID filtern. Wenn ich also "1" in eine Suchleiste eingebe, wird diese aktualisiert, um die entsprechenden Werte anzuzeigen.

Wenn es eine Methode gibt, wie man das macht, würde ich gerne wissen!

20
Witted

Es gibt keine Möglichkeit, dies mit einer Standardpipe zu tun. Hier ist die Liste der standardmäßig unterstützten Pipes: https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.ts .

Das heißt, Sie können leicht eine Pipe für einen solchen Anwendungsfall hinzufügen:

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

Und benutze es:

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

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

Hoffe es hilft dir, Thierry

36

Ich habe ein ähnliches Szenario in einem meiner Beispiele

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

Mein Ansatz ist es, das Array bei einem qualifizierenden Ereignis neu zu berechnen. In meinem Fall ist es keyup. Das Binden an eine Funktion oder einen Filter mag praktisch erscheinen, es wird jedoch empfohlen, stattdessen direkt an das Array zu binden. Dies liegt daran, dass die Änderungsnachverfolgung verwirrt wird, da die Funktion/der Filter bei jedem Auslösen der Änderungsnachverfolgung eine neue Array-Instanz zurückgibt - unabhängig davon, was sie ausgelöst hat.

Hier ist die vollständige Quelle: https://github.com/thelgevold/angular-2-samples/tree/master/components/spreadsheet

Ich habe auch eine Demo: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

5
TGH