angular - ऑर्डरबी पाइप मुद्दा




pipe angular2-template (11)

Angular2 के वर्तमान संस्करण में, ऑर्डरबाय और ArraySort पाइप समर्थित नहीं हैं। आपको इसके लिए कुछ कस्टम पाइप लिखने / उपयोग करने की आवश्यकता है।

मैं इस कोड को Angualr 1 से Angular 2 में अनुवाद करने में सक्षम नहीं हूं:

ng-repeat="todo in todos | orderBy: 'completed'"

यह वही है जो मैंने थियरी टेम्पलर के उत्तर के बाद किया है:

घटक टेम्पलेट:

*ngFor="#todo of todos | sort"

घटक कोड:

@Component({
    selector: 'my-app',
    templateUrl: "./app/todo-list.component.html",
    providers: [TodoService],
    pipes: [ TodosSortPipe ]

})

पाइप कोड:

import { Pipe } from "angular2/core";
import {Todo} from './todo';

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

मैं Todo की एक सरणी को सॉर्ट करने की कोशिश कर रहा हूं, जो completed संपत्ति द्वारा आदेशित है। पहले todo.completed = false और फिर todo.complete = true

मैं बहुत अच्छी तरह से transform विधि और उस विधि में और sort तरीके से तर्कों को पारित करने के लिए समझ में नहीं आता।

args: string क्या है args: string तर्क? b और b क्या हैं और वे कहाँ से आते हैं?


Package.json में, ऐसा कुछ जोड़ें (यह संस्करण कोणीय 2 के लिए ठीक है):

  "ngx-order-pipe": "^1.1.3",

आपके टाइपस्क्रिप्ट मॉड्यूल में (और आयात सरणी):

  import { OrderModule } from 'ngx-order-pipe';

आप इसके लिए एक कस्टम पाइप लागू कर सकते हैं जो एरेज़ के sort लाभ उठाता है:

import { Pipe } from "angular2/core";

@Pipe({
  name: "sort"
})
export class ArraySortPipe {
  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;
  }
}

और फिर नीचे बताए अनुसार इस पाइप का उपयोग करें। घटक की pipes विशेषता में अपने पाइप को निर्दिष्ट करने के लिए मत भूलना:

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

यह स्ट्रिंग मानों के साथ सरणियों के लिए एक सरल नमूना है, लेकिन आपके पास कुछ उन्नत सॉर्टिंग प्रसंस्करण (ऑब्जेक्ट सरणी के मामले में ऑब्जेक्ट विशेषताओं के आधार पर, सॉर्टिंग पैरामीटर, ...) के आधार पर हो सकता है।

इसके लिए यहां एक प्लंक्र है: https://plnkr.co/edit/WbzqDDOqN1oAhvqMkQRQ?p=preview

आशा है कि यह आपकी मदद करता है, थियरी


कोणीय के साथ यू का उपयोग करने की सिफारिश करें, तो आपका पाइप अगला होगा:

import {Pipe, PipeTransform} from '@angular/core';
import * as _ from 'lodash'
@Pipe({
    name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

    transform(array: Array<any>, args?: any): any {
        return _.sortBy(array, [args]);
    }

}

और HTML में इसका उपयोग करें

*ngFor = "#todo of todos | orderBy:'completed'"

और अपने मॉड्यूल में पाइप जोड़ना न भूलें

@NgModule({
    ...,
    declarations: [OrderByPipe, ...],
    ...
})

जैसा कि हम जानते हैं कि ANGULAR 2 से फ़िल्टर और ऑर्डर हटा दिए गए हैं और हमें अपना स्वयं का लिखना आवश्यक है, यहाँ plunker और विस्तृत लेख पर एक अच्छा उदाहरण है

यह दोनों फिल्टर के साथ-साथ ऑर्डरबी का उपयोग करता था, यहां ऑर्डर पाइप के लिए कोड है

import { Pipe, PipeTransform } from '@angular/core';    
@Pipe({  name: 'orderBy' })
export class OrderrByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {       
    return records.sort(function(a, b){
          if(a[args.property] < b[args.property]){
            return -1 * args.direction;
          }
          else if( a[args.property] > b[args.property]){
            return 1 * args.direction;
          }
          else{
            return 0;
          }
        });
    };
 }

पूर्ण चर्चा के लिए कृपया https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe देखें। यह उद्धरण सबसे अधिक प्रासंगिक है। मूल रूप से, बड़े पैमाने पर ऐप्स के लिए जिन्हें आक्रामक रूप से छोटा किया जाना चाहिए और फ़िल्टरिंग और सॉर्टिंग लॉजिक को घटक को ही स्थानांतरित करना चाहिए।

"हममें से कुछ लोग इसे आक्रामक रूप से छोटा करने की परवाह नहीं कर सकते हैं। यह हमारी पसंद है। लेकिन कोणीय उत्पाद को किसी और को आक्रामक रूप से खनन करने से नहीं रोकना चाहिए। इसलिए, कोणीय टीम ने फैसला किया कि कोणीय में भेजी गई हर चीज सुरक्षित रूप से पुष्टि करेगी।

कोणीय टीम और कई अनुभवी कोणीय डेवलपर्स दृढ़ता से अनुशंसा करते हैं कि आप घटक में ही फ़िल्टरिंग और सॉर्टिंग तर्क को स्थानांतरित करें। घटक फ़िल्टर किए गए हेरो या सॉर्टहेड गुण को उजागर कर सकता है और सहायक तर्क को निष्पादित करने के लिए कब और कितनी बार नियंत्रण कर सकता है। कोई भी क्षमता जिसे आपने एक पाइप में डाला होगा और ऐप में साझा किया जाएगा, उसे फ़िल्टरिंग / सॉर्टिंग सेवा में लिखा जा सकता है और घटक में इंजेक्ट किया जा सकता है। ”


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

<li *ngFor="#todo in todos | orderBy : ['completed']">{{todo.name}} {{todo.completed}}</li>

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

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

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


यह कोणीय 4 में एंगुलरज ऑर्डरबी पाइप के लिए अच्छा प्रतिस्थापन है। प्रयोग करने में आसान और सरल।

यह अधिक जानकारी https://github.com/VadimDez/ngx-order-pipe लिए github URL है

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

@Pipe({
  name: 'orderBy'
})
export class OrderPipe implements PipeTransform {

  transform(value: any | any[], expression?: any, reverse?: boolean): any {
    if (!value) {
      return value;
    }

    const isArray = value instanceof Array;

    if (isArray) {
      return this.sortArray(value, expression, reverse);
    }

    if (typeof value === 'object') {
      return this.transformObject(value, expression, reverse);
    }

    return value;
  }

  /**
   * Sort array
   *
   * @param value
   * @param expression
   * @param reverse
   * @returns {any[]}
   */
  private sortArray(value: any[], expression?: any, reverse?: boolean): any[] {
    const isDeepLink = expression && expression.indexOf('.') !== -1;

    if (isDeepLink) {
      expression = OrderPipe.parseExpression(expression);
    }

    let array: any[] = value.sort((a: any, b: any): number => {
      if (!expression) {
        return a > b ? 1 : -1;
      }

      if (!isDeepLink) {
        return a[expression] > b[expression] ? 1 : -1;
      }

      return OrderPipe.getValue(a, expression) > OrderPipe.getValue(b, expression) ? 1 : -1;
    });

    if (reverse) {
      return array.reverse();
    }

    return array;
  }


  /**
   * Transform Object
   *
   * @param value
   * @param expression
   * @param reverse
   * @returns {any[]}
   */
  private transformObject(value: any | any[], expression?: any, reverse?: boolean): any {
    let parsedExpression = OrderPipe.parseExpression(expression);
    let lastPredicate = parsedExpression.pop();
    let oldValue = OrderPipe.getValue(value, parsedExpression);

    if (!(oldValue instanceof Array)) {
      parsedExpression.push(lastPredicate);
      lastPredicate = null;
      oldValue = OrderPipe.getValue(value, parsedExpression);
    }

    if (!oldValue) {
      return value;
    }

    const newValue = this.transform(oldValue, lastPredicate, reverse);
    OrderPipe.setValue(value, newValue, parsedExpression);
    return value;
  }

  /**
   * Parse expression, split into items
   * @param expression
   * @returns {string[]}
   */
  private static parseExpression(expression: string): string[] {
    expression = expression.replace(/\[(\w+)\]/g, '.$1');
    expression = expression.replace(/^\./, '');
    return expression.split('.');
  }

  /**
   * Get value by expression
   *
   * @param object
   * @param expression
   * @returns {any}
   */
  private static getValue(object: any, expression: string[]) {
    for (let i = 0, n = expression.length; i < n; ++i) {
      const k = expression[i];
      if (!(k in object)) {
        return;
      }
      object = object[k];
    }

    return object;
  }

  /**
   * Set value by expression
   *
   * @param object
   * @param value
   * @param expression
   */
  private static setValue(object: any, value: any, expression: string[]) {
    let i;
    for (i = 0; i < expression.length - 1; i++) {
      object = object[expression[i]];
    }

    object[expression[i]] = value;
  }
}

अपडेट किए गए ऑर्डरबाइप: अपडेट किए गए स्ट्रिंग्स नहीं।

एक ऑर्डरबाइप क्लास बनाएँ:

import { Pipe, PipeTransform } from "@angular/core";
@Pipe( {
name: 'orderBy'
} )
export class OrderByPipe implements PipeTransform {
transform( array: Array<any>, orderField: string, orderType: boolean ): Array<string> {
    array.sort( ( a: any, b: any ) => {
        let ae = a[ orderField ];
        let be = b[ orderField ];
        if ( ae == undefined && be == undefined ) return 0;
        if ( ae == undefined && be != undefined ) return orderType ? 1 : -1;
        if ( ae != undefined && be == undefined ) return orderType ? -1 : 1;
        if ( ae == be ) return 0;
        return orderType ? (ae.toString().toLowerCase() > be.toString().toLowerCase() ? -1 : 1) : (be.toString().toLowerCase() > ae.toString().toLowerCase() ? -1 : 1);
    } );
    return array;
  }
}

आपके नियंत्रक में:

@Component({
pipes: [OrderByPipe]
})

या अपने में

 declarations: [OrderByPipe]

अपने HTML में:

<tr *ngFor="let obj of objects | orderBy : ObjFieldName: OrderByType">

ObjFieldName: ऑब्जेक्ट फ़ील्ड नाम जिसे आप सॉर्ट करना चाहते हैं;

ऑर्डरबाइट: बूलियन; सच: अवरोही क्रम; असत्य: आरोही;


Angular JS में ऑर्डरबी पाइप सपोर्ट करेगा लेकिन Angular (उच्च संस्करण) सपोर्ट नहीं करेगा । कृपया पाएं कि उन्होंने प्रदर्शन की गति बढ़ाने के लिए चर्चा की है।

https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe


Component template:
todos| sort: ‘property’:’asc|desc’

Pipe code:

import { Pipe,PipeTransform  } from "angular/core";
import {Todo} from './todo';

@Pipe({
  name: "sort"
})
export class TodosSortPipe implements PipeTransform {
  transform(array: Array<Todo>, args: string): Array<Todo> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {`enter code here`
        return 0;
      }
    });
    return array;
  }
}




angular-pipe