অর্ডার বাই পাইপ ইস্যু

Question 1

আমি এই কোডটি 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তর্ক কী ? কি কি aএবং bতারা কোথা থেকে এসেছ?

Question 2

আমি @ থিরি টেম্পিলারের প্রতিক্রিয়া পরিবর্তন করেছি যাতে পাইপ কৌণিক 4 টি কাস্টম অবজেক্টগুলিকে সাজিয়ে তুলতে পারে:

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

@Pipe({
  name: "sort"
})
export class ArraySortPipe  implements PipeTransform {
  transform(array: any, field: string): any[] {
    if (!Array.isArray(array)) {
      return;
    }
    array.sort((a: any, b: any) => {
      if (a[field] < b[field]) {
        return -1;
      } else if (a[field] > b[field]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

এবং এটি ব্যবহার করতে:

*ngFor="let myObj of myArr | sort:'fieldName'"

আশা করি এটি কাউকে সাহায্য করবে।

Question 3

সম্পূর্ণ আলোচনার জন্য দয়া করে https://angular.io/guide/pines#appendix-no-filterpipe-or-orderbypype দেখুন । এই উদ্ধৃতিটি সবচেয়ে প্রাসঙ্গিক। মূলত, বৃহত্তর স্কেল অ্যাপ্লিকেশনগুলির জন্য যা আক্রমণাত্মকভাবে মাইন করা উচিত ফিল্টারিং এবং বাছাইয়ের যুক্তিগুলি নিজেই উপাদানটিতে চলে যেতে হবে।

"আমাদের মধ্যে কেউ কেউ আক্রমণাত্মকভাবে এটি হ্রাস করার জন্য যত্ন নিতে পারে না That's এটি আমাদের পছন্দ But

কৌণিক দল এবং অনেক অভিজ্ঞ কৌণিক বিকাশকারীরা দৃ strongly়ভাবে সুপারিশ করেন যে আপনি ফিল্টারিং এবং লজিকটিকে সেই উপাদানটিতে বাছাই করে নিন। উপাদানটি একটি ফিল্টারড হিরোস বা सॉোর্টড হেরোসের সম্পত্তি উন্মোচিত করতে পারে এবং কখন এবং কতক্ষণ সমর্থনকারী যুক্তি সম্পাদন করতে হবে তার নিয়ন্ত্রণ নিতে পারে। আপনি কোনও পাইপ রেখে অ্যাপ্লিকেশন জুড়ে ভাগ করে নিতে পারবেন এমন কোনও দক্ষতা ফিল্টারিং / সাজানোর পরিষেবাতে লেখা যেতে পারে এবং উপাদানটিতে ইনজেকশনের ব্যবস্থা করা যেতে পারে। "

Question 4

আপনি এটির জন্য একটি কাস্টম পাইপ প্রয়োগ করতে পারেন যা 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= পূর্বরূপ দেখুন ।

আশা করি এটি আপনাকে সহায়তা করবে, থিয়েরি

Question 5

আপডেট করা অর্ডারবাইপাইপ: স্ট্রিং না বাছাইয়ের স্থির।

অর্ডারবাইপাইপ শ্রেণি তৈরি করুন:

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]

আপনার এইচটিএমএলে:

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

ObjFieldName: আপনি বাছাই করতে চান বস্তুর নাম;

অর্ডারবাইটাইপ: বুলিয়ান; সত্য: অবতরণ ক্রম; মিথ্যা: আরোহী;

Question 6

কৌণিক একটি অর্ডার নিয়ে আসে না বাক্স থেকে ফিল্টার আউট, তবে আমরা যদি সিদ্ধান্ত নিই যে আমাদের একটি প্রয়োজন হয় তবে আমরা সহজেই একটি তৈরি করতে পারি। গতি এবং মিনিফিকেশন সম্পর্কে আমাদের কিছু সচেতন হওয়া দরকার। নিচে দেখ.

একটি সাধারণ পাইপ দেখতে এরকম কিছু হবে।

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

@Pipe({
  name: 'sort'
})
export class SortPipe implements PipeTransform {
  transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
    return ary.sort(fn)
  }
}

এই পাইপটি একটি বাছাই ফাংশন ( fn) গ্রহণ করে এবং এটি একটি ডিফল্ট মান দেয় যা আধ্যাত্মিক উপায়ে আদিমদের অ্যারেটিকে সাজিয়ে তোলে। আমরা চাইলে এই সাজানোর ক্রিয়াকে ওভাররাইড করার বিকল্প রয়েছে।

এটি কোনও গুণবাচক নামটিকে স্ট্রিং হিসাবে গ্রহণ করে না, কারণ অ্যাট্রিবিউটের নামগুলি হ্রাসের বিষয়। যখন আমরা আমাদের কোডটি মিনিমাইফ করব তখন সেগুলি পরিবর্তন হবে, তবে টেমপ্লেটের স্ট্রিংয়ের মান হ্রাস করার জন্য মিনিফায়ারগুলি যথেষ্ট স্মার্ট নয়।

বাছাই করা আদিম (সংখ্যা এবং স্ট্রিং)

আমরা এটি ডিফল্ট তুলক ব্যবহার করে একটি সংখ্যা বা স্ট্রিং সাজানোর জন্য এটি ব্যবহার করতে পারি:

import { Component } from '@angular/core';

@Component({
  selector: 'cat',
  template: `
    {{numbers | sort}}
    {{strings | sort}}
  `
})
export class CatComponent
  numbers:Array<number> = [1,7,5,6]
  stringsArray<string> = ['cats', 'hats', 'caveats']
}

বস্তুর একটি অ্যারে বাছাই করা হচ্ছে

আমরা যদি বস্তুর একটি অ্যারে বাছাই করতে চাই তবে আমরা এটিকে তুলনামূলক ফাংশন দিতে পারি।

import { Component } from '@angular/core';

@Component({
  selector: 'cat',
  template: `
    {{cats | sort:byName}}
  `
})
export class CatComponent
  cats:Array<Cat> = [
    {name: "Missy"},
    {name: "Squoodles"},
    {name: "Madame Pompadomme"}
  ]
  byName(a,b) {
    return a.name > b.name ? 1 : -1
  }
}

ক্যাভেটস - খাঁটি বনাম অপরিষ্কার পাইপ

কৌণিক 2 খাঁটি এবং অপরিষ্কার পাইপ ধারণা আছে।

একটি খাঁটি পাইপ অবজেক্টের পরিচয় ব্যবহার করে পরিবর্তন সনাক্তকরণকে অনুকূল করে। এর অর্থ হ'ল পাইপটি কেবল তখনই চলবে যদি ইনপুট অবজেক্টটি পরিচয় পরিবর্তন করে, উদাহরণস্বরূপ যদি আমরা অ্যারেতে একটি নতুন আইটেম যুক্ত করি। এটি বস্তুগুলিতে উত্থিত হবে না। এর অর্থ হল যে আমরা যদি নেস্টেড বৈশিষ্ট্য পরিবর্তন করি: this.cats[2].name = "Fluffy"উদাহরণস্বরূপ, পাইপটি পুনরায় চালু হবে না। এটি কৌনিক দ্রুত হতে সাহায্য করে। কৌণিক পাইপগুলি ডিফল্টরূপে খাঁটি।

অন্যদিকে একটি অপরিষ্কার পাইপ বস্তুর বৈশিষ্ট্যগুলি পরীক্ষা করবে। এটি সম্ভবত এটি অনেক ধীর করে তোলে। যেহেতু পাইপ ফাংশনটি কী করবে তা গ্যারান্টি দিতে পারে না (উদাহরণস্বরূপ এটি দিনের সময়ের উপর ভিত্তি করে এটি আলাদাভাবে বাছাই করা হয়েছে), ততবার অ্যাসিঙ্ক্রোনাস ইভেন্ট সংঘটিত হওয়ার সাথে সাথে একটি অশুদ্ধ পাইপ চলবে। অ্যারে বড় হলে এটি আপনার অ্যাপ্লিকেশনটিকে যথেষ্ট গতি কমিয়ে দেবে।

উপরের পাইপটি খাঁটি। এর অর্থ এটি কেবল তখনই চলবে যখন অ্যারেতে থাকা অবজেক্টগুলি অপরিবর্তনীয়। আপনি যদি একটি বিড়াল পরিবর্তন করেন তবে আপনাকে অবশ্যই পুরো বিড়ালের বস্তুকে নতুন দিয়ে প্রতিস্থাপন করতে হবে।

this.cats[2] = {name:"Tomy"}

আমরা বিশুদ্ধ বৈশিষ্ট্যটি সেট করে উপরেরটিকে একটি অপরিষ্কার পাইপে পরিবর্তন করতে পারি:

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

@Pipe({
  name: 'sort',
  pure: false
})
export class SortPipe implements PipeTransform {
  transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
    return ary.sort(fn)
  }
}

এই পাইপ বস্তুগুলিতে নেমে আসবে তবে ধীর হবে। সতর্কতার সাথে ব্যবহার করুন.

Question 7

আমি একটি অর্ডারবাই পাইপ তৈরি করেছি যা আপনার প্রয়োজন অনুযায়ী করে। এটি পাশাপাশি প্রচুর পরিমাণে অবজেক্টের একাধিক কলামে বাছাই করতে সক্ষম হয় supports

<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

Question 8

আপনি কৌণিক দিয়ে লোডাশ ব্যবহার করার পরামর্শ দিন, তারপরে আপনার পাইপটি পরবর্তী হবে:

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

}

এবং এটি এইচটিএমএলের মতো ব্যবহার করুন

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

এবং আপনার মডিউলটিতে পাইপ যুক্ত করতে ভুলবেন না

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

Question 9

আপনি যে কোনও ক্ষেত্রে এটি পাস করার জন্য এটি কাজ করবে। ( গুরুত্বপূর্ণ: এটি কেবল বর্ণানুক্রমিক অর্ডার করবে তাই আপনি যদি কোনও তারিখ পাস করেন তবে এটি এটিকে বর্ণমালা হিসাবে আদেশ করবে যেমন তারিখ নয়)

/*
 *      Example use
 *      Basic Array of single type: *ngFor="let todo of todoService.todos | orderBy : '-'"
 *      Multidimensional Array Sort on single column: *ngFor="let todo of todoService.todos | orderBy : ['-status']"
 *      Multidimensional Array Sort on multiple columns: *ngFor="let todo of todoService.todos | orderBy : ['status', '-title']"
 */

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

@Pipe({name: "orderBy", pure: false})
export class OrderByPipe implements PipeTransform {

    value: string[] = [];

    static _orderByComparator(a: any, b: any): number {

        if (a === null || typeof a === "undefined") { a = 0; }
        if (b === null || typeof b === "undefined") { b = 0; }

        if (
            (isNaN(parseFloat(a)) ||
            !isFinite(a)) ||
            (isNaN(parseFloat(b)) || !isFinite(b))
        ) {
            // Isn"t a number so lowercase the string to properly compare
            a = a.toString();
            b = b.toString();
            if (a.toLowerCase() < b.toLowerCase()) { return -1; }
            if (a.toLowerCase() > b.toLowerCase()) { return 1; }
        } else {
            // Parse strings as numbers to compare properly
            if (parseFloat(a) < parseFloat(b)) { return -1; }
            if (parseFloat(a) > parseFloat(b)) { return 1; }
        }

        return 0; // equal each other
    }

    public transform(input: any, config = "+"): any {
        if (!input) { return input; }

        // make a copy of the input"s reference
        this.value = [...input];
        let value = this.value;
        if (!Array.isArray(value)) { return value; }

        if (!Array.isArray(config) || (Array.isArray(config) && config.length === 1)) {
            let propertyToCheck: string = !Array.isArray(config) ? config : config[0];
            let desc = propertyToCheck.substr(0, 1) === "-";

            // Basic array
            if (!propertyToCheck || propertyToCheck === "-" || propertyToCheck === "+") {
                return !desc ? value.sort() : value.sort().reverse();
            } else {
                let property: string = propertyToCheck.substr(0, 1) === "+" || propertyToCheck.substr(0, 1) === "-"
                    ? propertyToCheck.substr(1)
                    : propertyToCheck;

                return value.sort(function(a: any, b: any) {
                    let aValue = a[property];
                    let bValue = b[property];

                    let propertySplit = property.split(".");

                    if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
                        aValue = a;
                        bValue = b;
                        for (let j = 0; j < propertySplit.length; j++) {
                            aValue = aValue[propertySplit[j]];
                            bValue = bValue[propertySplit[j]];
                        }
                    }

                    return !desc
                        ? OrderByPipe._orderByComparator(aValue, bValue)
                        : -OrderByPipe._orderByComparator(aValue, bValue);
                });
            }
        } else {
            // Loop over property of the array in order and sort
            return value.sort(function(a: any, b: any) {
                for (let i = 0; i < config.length; i++) {
                    let desc = config[i].substr(0, 1) === "-";
                    let property = config[i].substr(0, 1) === "+" || config[i].substr(0, 1) === "-"
                        ? config[i].substr(1)
                        : config[i];

                    let aValue = a[property];
                    let bValue = b[property];

                    let propertySplit = property.split(".");

                    if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
                        aValue = a;
                        bValue = b;
                        for (let j = 0; j < propertySplit.length; j++) {
                            aValue = aValue[propertySplit[j]];
                            bValue = bValue[propertySplit[j]];
                        }
                    }

                    let comparison = !desc
                        ? OrderByPipe._orderByComparator(aValue, bValue)
                        : -OrderByPipe._orderByComparator(aValue, bValue);

                    // Don"t return 0 yet in case of needing to sort by next property
                    if (comparison !== 0) { return comparison; }
                }

                return 0; // equal each other
            });
        }
    }
}

Question 10

এটি কৌণিক 4 এ অ্যাংুলারজেস অর্ডারবি পাইপের জন্য ভাল প্রতিস্থাপন । সহজ এবং ব্যবহার করা সহজ।

এটি আরও তথ্যের জন্য গিথুব ইউআরএল https://github.com/VadimDez/ngx-order-pipe

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

Question 11

যেহেতু আমরা জানি ফিল্টার এবং অর্ডার দ্বারা আংগুলার 2 থেকে অপসারণ করা হয়েছে এবং আমাদের নিজস্ব লেখার দরকার রয়েছে, এখানে নিমজ্জনকারী এবং বিস্তারিত নিবন্ধের জন্য একটি ভাল উদাহরণ

এটি উভয় ফিল্টার পাশাপাশি অর্ডারবাই ব্যবহার করে, এখানে অর্ডার পাইপের কোড রয়েছে

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

Question 12

আপনি এটি বস্তুর জন্য ব্যবহার করতে পারেন:

@Pipe({
  name: 'sort',
})
export class SortPipe implements PipeTransform {

  transform(array: any[], field: string): any[] {
    return array.sort((a, b) => a[field].toLowerCase() !== b[field].toLowerCase() ? a[field].toLowerCase() < b[field].toLowerCase() ? -1 : 1 : 0);
  }

}

Question 13

প্যাকেজ.জসনে, এর মতো কিছু যুক্ত করুন (এই সংস্করণটি কৌনিক 2 এর জন্য ঠিক আছে):

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

আপনার টাইপ স্ক্রিপ্ট মডিউলে (এবং অ্যারে আমদানি করে):

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

Question 14

অ্যাঙ্গুলার 2 এর বর্তমান সংস্করণে অর্ডারবাই এবং অ্যারেসোর্ট পাইপগুলি সমর্থিত নয়। এর জন্য আপনাকে কিছু কাস্টম পাইপ লিখতে / ব্যবহার করতে হবে।

Question 15

কৌণিক 5+ সংস্করণের জন্য আমরা এনজিএক্স-অর্ডার-পাইপ প্যাকেজটি ব্যবহার করতে পারি

উত্স টিউটোরিয়াল লিঙ্ক

প্যাকেজ ইনস্টল করুন

$ npm install ngx-order-pipe --save

অ্যাপস মডিউলে আমদানি করুন

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { OrderModule } from 'ngx-order-pipe';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    OrderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

যে কোনও জায়গায় ব্যবহার করুন

  <ul>
    <li *ngFor="let item of (dummyData | orderBy:'name') ">
      {{item.name}}
    </li>
  </ul>

Question 16

কৌণিক জেএসে অর্ডারবাই পাইপ সমর্থন করবে তবে কৌণিক (উচ্চতর সংস্করণ) সমর্থন করবে না । পারফরম্যান্সের গতি অচল করার জন্য তিনি আলোচিত বিবরণগুলি সন্ধান করুন।

https://angular.io/guide/pines#appendix-no-filterpipe-or-orderbype

Question 17

<!-- const cars=['Audi','Merc','BMW','Volvo','Tesla'] -->

<ul>
  <li *ngFor="let car of cars">{{car}}</li>
</ul>


/*
 *ngFor="let c of oneDimArray | sortBy:'asc'"
 *ngFor="let c of arrayOfObjects | sortBy:'asc':'propertyName'"
*/
import { Pipe, PipeTransform } from '@angular/core';
import { orderBy } from 'lodash';

@Pipe({ name: 'sortBy' })
export class SortByPipe implements PipeTransform {

  transform(value: any[], order = '', column: string = ''): any[] {
    if (!value || order === '' || !order) { return value; } // no array
    if (!column || column === '') { return sortBy(value); } // sort 1d array
    if (value.length <= 1) { return value; } // array with only one item
    return orderBy(value, [column], [order]);
  }
}

Question 18

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