Angular 2. Jak zastosować orderBy?

Question

Mam kawałek kodu.

<table class="table table-bordered table-condensed" cellpadding="0" cellspacing="0"> 
 
    <thead> 
 
     <tr> 
 
      <th>#</th> 
 
      <th>Name</th> 
 
      <th>Score</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr *ngFor="#participant of participants; #i = index"> 
 
      <td>{{i+1}}</td> 
 
      <td>{{participant.username}}</td> 
 
      <td>{{participant.score}}</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

kątowej 1 mam orderby filtr na zamówienie wiersze mojego filtra. Ale jak mogę zrobić orderBy w Angular 2 w ten sam sposób? Dziękuję Ci.

Answer 1

Musisz zaimplementować niestandardową rurę do tego. Odpowiada to stworzeniu klasy ozdobionej przez @Pipe. Oto próbka. Jego metoda rzeczywiście przekształcić obsługiwać listę a będziesz mógł go rozwiązać, jak chcesz:

import { Pipe } from "angular2/core"; 

@Pipe({ 
    name: "orderby" 
}) 
export class OrderByPipe { 
    transform(array: Array<string>, args: string): Array<string> { 
    array.sort((a: any, b: any) => { 
     if (a < b) { 
     return -1; 
     } else if (a > b) { 
     return 1; 
     } else { 
     return 0; 
     } 
    }); 
    return array; 
    } 
} 

Można wtedy skorzystać z tej rury, jak opisano poniżej w wyrażeniach. Na przykład w ngFor. Nie zapomnij podać swoje rury do atrybutu składnika, gdzie używasz go pipes:

@Component({ 
    (...) 
    template: ` 
    <li *ngFor="list | orderby"> (...) </li> 
    `, 
    pipes: [ OrderByPipe ] 
}) 
(...) 

Answer 2

Dziękuję za odpowiedzi. Pisałem kod wykonalne poniżej:

@Pipe({name: 'orderBy'}) 
 

 
export class orderBy implements PipeTransform { 
 
    transform(obj: any, orderFields: string): any { 
 
     orderFields.forEach(function(currentField) { 
 
      var orderType = 'ASC'; 
 

 
      if (currentField[0] === '-') { 
 
       currentField = currentField.substring(1); 
 
       orderType = 'DESC'; 
 
      } 
 

 
      obj.sort(function(a, b) { 
 
       if (orderType === 'ASC') { 
 
        if (a[currentField] < b[currentField]) return -1; 
 
        if (a[currentField] > b[currentField]) return 1; 
 
        return 0; 
 
       } else { 
 
        if (a[currentField] < b[currentField]) return 1; 
 
        if (a[currentField] > b[currentField]) return -1; 
 
        return 0; 
 
       } 
 
      }); 
 

 
     }); 
 
     return obj; 
 
    } 
 
}

Ten kod rozważyć zamówienie lub DESC kierunek ASC. Zastosowanie:

<tr *ngFor="#participant of participants | orderBy: '-score'; #i = index">

Answer 3

Jeśli używasz lodash swoją rurę może być tak:

import { Pipe, PipeTransform } from '@angular/core'; 
import { orderBy } from 'lodash'; 

@Pipe({ 
    name: 'orderBy' 
}) 
export class OrderByPipe implements PipeTransform { 
    transform = orderBy; 
} 

a następnie można wykorzystać całą moc metoda:

<li *ngFor="let product of products | orderBy: 'price': 'desc'"> 
    {{product.name}} 
</li>