2016-12-13 3 views
5

मैं पाशन कर रहा हूँ में में प्रदर्शित करने के लिए * ngFor सरणी छँटाई सभी पोस्टAngular2 एचटीएमएल

<li *ngFor="let post of posts"> 

जब प्रत्येक पद के लिए उस दिनांक को प्रदर्शित मैं कर के माध्यम से:

{{post.date | date:'yyyy-MM-dd HH:mm:ss'}} 

मुझे क्या करना चाहते है सबसे पहले नए पदों के लिए सभी पदों को प्रदर्शित करें।

मैं की तरह एक पाइप का उपयोग कर की कोशिश की है:

<li *ngFor="let post of posts | order-by-pipe"> 

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

@Pipe({ 
name: 'order-by-pipe' 
}) 
export class OrderByPipe implements PipeTransform{ 

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

    if(!array || array === undefined || array.length === 0) return null; 

    array.sort((a: any, b: any) => { 
     if (a.date < b.date) { 
     return -1; 
     } else if (a.date > b.date) { 
     return 1; 
     } else { 
     return 0; 
     } 
    }); 
    return array; 
    } 

} 

लेकिन यह काम नहीं करता। मैं त्रुटि मिलती है:

TypeError: Cannot read property 'toUpperCase' of undefined (" 
[ERROR ->]*ngFor="let post of posts | order-by-pipe"> 

किसी भी मदद स्वागत किया जाएगा, धन्यवाद

+1

यह भ्रामक लगता है पर एक ऐसी ही चर्चा देखें, जहां 'toUpperCase' बुलाया जा रहा है? आपने जो पोस्ट किया है उसमें कहीं भी नहीं। – silentsod

+0

मुझे पता है, त्रुटि बहुत मदद नहीं देती है, यही कारण है कि मुझे लगता है कि पाइप इसे पैदा कर रहा है। पाइप के बिना मुझे कोई त्रुटि नहीं मिलती है। – Fred

उत्तर

6

जब आप चयनकर्ता यह चर orderby और pipe खोजने के लिए और जो उनके साथ क्या जानता है क्या करने के लिए प्रयास कर रहा है के रूप में order-by-pipe का उपयोग करें।

को orderByPipe पर name: में बदलकर समस्या हल हो जाती है।

वह अजीब था।

यहाँ एक ही कोड का एक डेमो, अलग नाम है: http://plnkr.co/edit/BXkrPqeMYuJMhkx94i6M?p=preview

4

कोणीय टीम कोणीय 2 में छँटाई के लिए पाइप का उपयोग कर के खिलाफ सिफारिश की गई है, और जानबूझ कर AngularJS से इस सुविधा को गिरा दिया। https://angular.io/guide/pipes के बारे में विस्तृत रूप में:

Angular doesn't offer such pipes because they perform poorly and prevent aggressive minification... Filtering and especially sorting are expensive operations. The user experience can degrade severely for even moderate-sized lists when Angular calls these pipe methods many times per second. filter and orderBy have often been abused in AngularJS apps, leading to complaints that Angular itself is slow... The Angular team and many experienced Angular developers strongly recommend moving filtering and sorting logic into the component itself.

https://stackoverflow.com/a/43092380/3211269