eckig 2 sortieren und filtern

In Angularjs 1 können Sie folgendermaßen sortieren und filtern:

<ul ng-repeat="friend in friends | filter:query | orderBy: 'name' ">
   <li>{{friend.name}}</li>
</ul>

Aber ich konnte in Angularjs 2.0 keine Beispiele dafür finden. Meine Frage ist, wie man in Angularjs 2.0 sortiert und filtert. Wenn es immer noch nicht unterstützt wird, weiß jemand, wann oder ob es in Angularjs 2.0 aufgenommen wird?

Dies wird nicht sofort hinzugefügt, da das Angular-Team möchte, dass Angular 2 minimiert ausgeführt wird. OrderBy hat keine Reflexion mehr, die mit der Minimierung bricht. Lesen Sie die Antwort von Miško Heverey zu diesem Thema.

Ich habe mir die Zeit genommen, eine OrderBy-Pipe zu erstellen, die sowohl ein- als auch mehrdimensionale Arrays unterstützt. Es unterstützt auch die Möglichkeit, nach mehreren Spalten des mehrdimensionalen Arrays zu sortieren.

<li *ngFor="let person of people | orderBy : ['-lastName', 'age']">{{person.firstName}} {{person.lastName}}, {{person.age}}</li>

Diese Pipe ermöglicht das Hinzufügen weiterer Elemente zum Array nach dem Rendern der Seite und das korrekte Sortieren der Arrays mit den neuen Elementen.

Ich habe hier einen Bericht über den Prozess .

Und hier ist eine funktionierende Demo: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby und https://plnkr.co/edit/DHLVc0?p=info

BEARBEITEN: Neue Demo zu http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby hinzugefügt

EDIT 2: ngFor auf neue Syntax aktualisiert

Es wird vom Design nicht unterstützt. Die sortBy-Pipe kann bei einer App im Produktionsmaßstab zu echten Leistungsproblemen führen. Dies war ein Problem mit der eckigen Version 1.

Sie sollten keine benutzerdefinierte Sortierfunktion erstellen. Stattdessen sollten Sie Ihr Array zuerst in der Typoskriptdatei sortieren und dann anzeigen. Wenn die Reihenfolge aktualisiert werden muss, wenn beispielsweise eine Dropdown-Liste ausgewählt ist, muss diese Dropdown-Auswahl eine Funktion auslösen und Ihre von dort aufgerufene Sortierfunktion aufrufen. Diese Sortierfunktion kann in einen Dienst extrahiert werden, damit er wiederverwendet werden kann. Auf diese Weise wird die Sortierung nur angewendet, wenn dies erforderlich ist, und Ihre App-Leistung wird viel besser.

Hier ist eine einfache Filterpipe für ein Array von Objekten, die Attribute mit Zeichenfolgenwerten enthalten (ES6).

filter-array-pipe.js

import {Pipe} from 'angular2/core';

// # Filter Array of Objects
@Pipe({ name: 'filter' })
export class FilterArrayPipe {
  transform(value, args) {
    if (!args[0]) {
      return value;
    } else if (value) {
      return value.filter(item => {
        for (let key in item) {
          if ((typeof item[key] === 'string' || item[key] instanceof String) && 
              (item[key].indexOf(args[0]) !== -1)) {
            return true;
          }
        }
      });
    }
  }
}

Ihre Komponente

myobjComponent.js

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {FilterArrayPipe} from 'filter-array-pipe';

@Component({
  templateUrl: 'myobj.list.html',
  providers: [HTTP_PROVIDERS],
  pipes: [FilterArrayPipe]
})
export class MyObjList {
  static get parameters() {
    return [[Http]];
  }
  constructor(_http) {
    _http.get('/api/myobj')
      .map(res => res.json())
      .subscribe(
        data => this.myobjs = data,
        err => this.logError(err))
      );
  }
  resetQuery(){
    this.query = '';
  }
}

In Ihrer Vorlage

myobj.list.html

<input type="text" [(ngModel)]="query" placeholder="... filter" > 
<div (click)="resetQuery()"> <span class="icon-cross"></span> </div>
</div>
<ul><li *ngFor="#myobj of myobjs| filter:query">...<li></ul>

Eine Pipe nimmt Daten als Eingabe auf und wandelt sie in eine gewünschte Ausgabe um. Fügen Sie diese Pipe-Datei hinzu: orderby.tsin Ihrem /appOrdner.

orderby.ts

//The pipe class implements the PipeTransform interface's transform method that accepts an input value and an optional array of parameters and returns the transformed value.

import { Pipe,PipeTransform } from "angular2/core";

//We tell Angular that this is a pipe by applying the @Pipe decorator which we import from the core Angular library.

@Pipe({

  //The @Pipe decorator takes an object with a name property whose value is the pipe name that we'll use within a template expression. It must be a valid JavaScript identifier. Our pipe's name is orderby.

  name: "orderby"
})

export class OrderByPipe implements PipeTransform {
  transform(array:Array<any>, args?) {

    // Check if array exists, in this case array contains articles and args is an array that has 1 element : !id

    if(array) {

      // get the first element

      let orderByValue = args[0]
      let byVal = 1

      // check if exclamation point 

      if(orderByValue.charAt(0) == "!") {

        // reverse the array

        byVal = -1
        orderByValue = orderByValue.substring(1)
      }
      console.log("byVal",byVal);
      console.log("orderByValue",orderByValue);

      array.sort((a: any, b: any) => {
        if(a[orderByValue] < b[orderByValue]) {
          return -1*byVal;
        } else if (a[orderByValue] > b[orderByValue]) {
          return 1*byVal;
        } else {
          return 0;
        }
      });
      return array;
    }
    //
  }
}

Importieren Sie in Ihre Komponentendatei (app.component.ts) die gerade hinzugefügte Pipe mit: import {OrderByPipe} from './orderby';

Fügen Sie dann *ngFor="#article of articles | orderby:'id'"in Ihre Vorlage ein, wenn Sie Ihre Artikel nach ID in aufsteigender oder orderby:'!id'"absteigender Reihenfolge sortieren möchten .

Wir fügen einer Pipe Parameter hinzu, indem wir dem Pipe-Namen einen Doppelpunkt (:) und dann den Parameterwert folgen

Wir müssen unsere Pipe im Pipes-Array des @ Component-Dekorators auflisten. pipes: [ OrderByPipe ].

app.component.ts

import {Component, OnInit} from 'angular2/core';
import {OrderByPipe} from './orderby';

@Component({
    selector: 'my-app',
    template: `
      <h2>orderby-pipe by N2B</h2>
      <p *ngFor="#article of articles | orderby:'id'">
        Article title : {{article.title}}
      </p>
    `,
    pipes: [ OrderByPipe ]

})
export class AppComponent{
    articles:Array<any>
    ngOnInit(){
        this.articles = [
        {
            id: 1,
            title: "title1"
        },{
            id: 2,
            title: "title2",
        }]  
    }

}

Mehr Infos hier auf meinem Github und diesen Beitrag auf meiner Website

Sie müssen Ihre eigene Pipe für die Arraysortierung erstellen. Hier ist ein Beispiel, wie Sie dies tun können.

<li *ngFor="#item of array | arraySort:'-date'">{{item.name}} {{item.date | date:'medium' }}</li>

https://plnkr.co/edit/DU6pxr?p=preview

Das ist meine Art. Es wird die Sortierung von Zahlen, Zeichenfolgen und Datumsangaben durchführen.

import { Pipe , PipeTransform  } from "@angular/core";

@Pipe({
  name: 'sortPipe'
 })

export class SortPipe implements PipeTransform {

    transform(array: Array<string>, key: string): Array<string> {

        console.log("Entered in pipe*******  "+ key);


        if(key === undefined || key == '' ){
            return array;
        }

        var arr = key.split("-");
        var keyString = arr[0];   // string or column name to sort(name or age or date)
        var sortOrder = arr[1];   // asc or desc order
        var byVal = 1;


        array.sort((a: any, b: any) => {

            if(keyString === 'date' ){

                let left    = Number(new Date(a[keyString]));
                let right   = Number(new Date(b[keyString]));

                return (sortOrder === "asc") ? right - left : left - right;
            }
            else if(keyString === 'name'){

                if(a[keyString] < b[keyString]) {
                    return (sortOrder === "asc" ) ? -1*byVal : 1*byVal;
                } else if (a[keyString] > b[keyString]) {
                    return (sortOrder === "asc" ) ? 1*byVal : -1*byVal;
                } else {
                    return 0;
                }  
            }
            else if(keyString === 'age'){
                return (sortOrder === "asc") ? a[keyString] - b[keyString] : b[keyString] - a[keyString];
            }

        });

        return array;

  }

}