Was könnte eine schnelle und schnelle Möglichkeit sein, die UI-Liste neu zu sortieren?

Question

Im mit Angular 2 & Typoskript.

In meinem Projekt im eine einfache Liste von JSON-Objekte, sieht die html wie folgt präsentiert:

<div> 
    <!-- Present List Button --> 
    <button md-button 
      (click)="showList()" 
      class="md-primary" 
      title="show list">Cropping</button> 
</div> 


<md-content> 
    <div *ngIf="showList"> 
    <div class="list-bg" *ngFor="#list of lists | async"> 
    ID: {{list.id}} <p></p> Number of Items: {{list.numberOfItems}} 
    </div> 
    </div> 
</md-content> 

sehr einfache Liste.

Jetzt möchte ich eine Art von Methode, um diese Liste neu zu ordnen und die Listen-Array auf die neue Reihenfolge festlegen.

Ich bin auf der Suche nach einer Methode, die ein Benutzer die Liste neu anordnen, aber er will, wie die Liste nach Priorität ändern.

Könnte mir bitte jemand helfen, eine Methode zu finden, die schnell implementiert werden kann und gut funktioniert?

(Ich sah in einigen Drag & Drop-Bibliotheken, aber ich arbeite mit spezifischen ver von Angular 2 (2.0.0-beta.15), die nicht von ihnen Unterstützung.)

Dank zuzuteilen!

Answer 1

dafür haben Sie für weitere Informationen Winkel 2-Rohr verwenden, überprüfen this

orderBy Rohr

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ 
    name: "orderBy", 
    pure: false, 
}) 

export class OrderBy implements PipeTransform { 
    transform(array: any, args: any) { 
    if (array != null) { 
     if (array) { 
     let orderByValue = args; 
     let byVal = 1 
     if (orderByValue.charAt(0) == "!") { 
      byVal = -1 
      orderByValue = orderByValue.substring(1) 
     } 


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

Komponente

Ansicht für aufsteigend

<md-content> 
    <div *ngIf="showList"> 
    <div class="list-bg" *ngFor="#list of lists | async | orderBy:'id'"> 
    ID: {{list.id}} <p></p> Number of Items: {{list.numberOfItems}} 
    </div> 
    </div> 
</md-content> 

Ansicht für absteigend

<md-content> 
    <div *ngIf="showList"> 
    <div class="list-bg" *ngFor="#list of lists | async | orderBy:'!id'"> 
    ID: {{list.id}} <p></p> Number of Items: {{list.numberOfItems}} 
    </div> 
    </div> 
</md-content>