कोणीय 2. ऑर्डर कैसे लागू करें?

Question

मेरे पास कोड का एक टुकड़ा है।

<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>

कोणीय 1 में मैं orderBy मेरी फिल्टर द्वारा पंक्तियों ऑर्डर करने के लिए फिल्टर की है। लेकिन मैं एंगुलर 2 में ऑर्डर कैसे कर सकता हूं वैसे ही? धन्यवाद।

Answer 1

इसके लिए आपको एक कस्टम पाइप लागू करने की आवश्यकता है। यह @Pipe द्वारा सजाए गए वर्ग को बनाने के अनुरूप है। यहां एक नमूना है। इसके बदलना विधि वास्तव में सूची संभाल लेंगे और आप के रूप में आप चाहते हैं कि उसे सुलझाने के लिए सक्षम हो जाएगा:

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

फिर आप इस पाइप के रूप में भाव में नीचे वर्णित उपयोग कर सकते हैं। उदाहरण के लिए एक ngFor में। घटक जहां आप इसका इस्तेमाल की pipes विशेषता में अपने पाइप निर्दिष्ट करने के लिए मत भूलना:

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

Answer 2

अपने जवाब के लिए धन्यवाद। मैं व्यावहारिक कोड के नीचे लिखा है:

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

इस कोड पर विचार आदेश दिशा DESC या एएससी। उपयोग:

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

Answer 3

आप lodash अपने पाइप का उपयोग कर रहे हैं, तो इस तरह हो सकता है:

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

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

और फिर आप विधि के सभी शक्ति का उपयोग कर सकते हैं:

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