angular - कोणीय 2 प्रकार और फ़िल्टर




typescript (4)

Angularjs 1 में निम्नलिखित तरीके से छांटना और छानना संभव है:

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

लेकिन मुझे इस बात का कोई उदाहरण नहीं मिला कि इसे एंगुलरज 2.0 में कैसे किया जाए। मेरा सवाल यह है कि एंगुलरज 2.0 में सॉर्ट और फ़िल्टर कैसे किया जाए? अगर यह अभी भी समर्थित नहीं है, तो क्या किसी को पता है कि इसे कब और क्यों इसे एंगुलरज 2.0 में डाला जाएगा?


आपको सरणी छँटाई के लिए अपना स्वयं का पाइप बनाना होगा, यहाँ एक उदाहरण है कि आप ऐसा कैसे कर सकते हैं।

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

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


एक पाइप डेटा को इनपुट के रूप में लेता है और इसे वांछित आउटपुट में बदल देता है। इस पाइप फ़ाइल को जोड़ें: अपने /app फ़ोल्डर के अंदर orderby.ts

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

आपके घटक फ़ाइल में (app.component.ts) उस पाइप को आयात करें जिसे आपने अभी जोड़ा है: import {OrderByPipe} from './orderby';

फिर, *ngFor="#article of articles | orderby:'id'" को अपने टेम्पलेट के अंदर जोड़ें यदि आप अपने लेखों को क्रम में आरोही क्रम या क्रम में id द्वारा बनाना चाहते हैं orderby:'!id'" अवरोही क्रम में orderby:'!id'"

हम एक बृहदान्त्र (:) और फिर पैरामीटर मान के साथ पाइप नाम का पालन करके एक पाइप में पैरामीटर जोड़ते हैं

हमें अपने पाइप को @Component डेकोरेटर के पाइप एरे में सूचीबद्ध करना चाहिए। 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",
        }]  
    }

}

अधिक जानकारी यहाँ मेरे github और मेरी वेबसाइट पर इस पोस्ट पर


यह बॉक्स से बाहर नहीं जोड़ा गया है क्योंकि कोणीय टीम कोणीय 2 को चलाने के लिए चाहती है। ऑर्डरबी प्रतिबिंब से दूर चलता है जो कि खनन के साथ टूट जाता है। मामले पर Miško Heverey की प्रतिक्रिया देखें

मैंने एक ऑर्डरबी पाइप बनाने के लिए समय लिया है जो एकल और बहुआयामी दोनों सरणियों का समर्थन करता है। यह बहु-आयामी सरणी के कई स्तंभों को छाँटने में सक्षम होने का भी समर्थन करता है।

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

यह पाइप पृष्ठ को रेंडर करने के बाद सरणी में अधिक आइटम जोड़ने की अनुमति देता है, और फिर भी नए आइटम के साथ सरणियों को सही ढंग से सॉर्ट करता है।

यहां की प्रक्रिया पर मेरा एक लेख है

और यहाँ एक कार्यशील डेमो है: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby और https://plnkr.co/edit/DHLVc0?p=info

संपादित करें: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby नया डेमो जोड़ा गया

EDIT 2: नए सिंटैक्स के लिए ngFor अपडेट किया गया


यह मेरी तरह है। यह नंबर सॉर्ट, स्ट्रिंग सॉर्ट और डेट सॉर्ट करेगा।

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;

  }

}




typescript