Masalah pipa OrderBy

Saya tidak dapat menerjemahkan kode ini dari Angualr 1 ke Angular 2:

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

Inilah yang telah saya lakukan mengikuti jawaban Thierry Templier:

Template komponen:

*ngFor="#todo of todos | sort"

Kode komponen:

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

})

Kode pipa:

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

Saya mencoba mengurutkan larik Todos, yang diurutkan berdasarkan properti completed. Pertama todo.completed = falsedan kemudian todo.complete = true.

Saya tidak mengerti betul transformmetode dan bagaimana menyampaikan argumen dalam metode itu dan dalam sortmetode.

Apa args: stringargumennya? Apa adan bdan di mana mereka berasal?

Saya memodifikasi respons @Thierry Templier sehingga pipa dapat mengurutkan objek khusus dalam sudut 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;
  }
}

Dan untuk menggunakannya:

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

Semoga ini membantu seseorang.

Silakan lihat https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe untuk diskusi lengkapnya. Kutipan ini paling relevan. Pada dasarnya, untuk aplikasi skala besar yang harus diminimalkan secara agresif, logika pemfilteran dan pengurutan harus berpindah ke komponen itu sendiri.

"Beberapa dari kita mungkin tidak peduli untuk mengecilkan ini secara agresif. Itu pilihan kita. Tetapi produk Angular seharusnya tidak mencegah orang lain untuk mengecil secara agresif. Oleh karena itu, tim Angular memutuskan bahwa semua yang dikirim dalam Angular akan mengecil dengan aman.

Tim Angular dan banyak pengembang Angular berpengalaman sangat menyarankan Anda untuk memindahkan logika pemfilteran dan pengurutan ke dalam komponen itu sendiri. Komponen tersebut dapat mengekspos properti filteredHeroes atau sortHeroes dan mengontrol kapan dan seberapa sering logika pendukung dijalankan. Kemampuan apa pun yang akan Anda masukkan ke dalam pipa dan dibagikan di seluruh aplikasi dapat ditulis dalam layanan pemfilteran / penyortiran dan dimasukkan ke dalam komponen. "

Anda bisa menerapkan pipa khusus untuk ini yang memanfaatkan sortmetode array:

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

Dan gunakan pipa ini seperti yang dijelaskan di bawah ini. Jangan lupa untuk menentukan pipa Anda ke dalam pipesatribut komponen:

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

Ini adalah contoh sederhana untuk array dengan nilai string tetapi Anda dapat memiliki beberapa pemrosesan pengurutan lanjutan (berdasarkan atribut objek dalam kasus array objek, berdasarkan parameter pengurutan, ...).

Berikut adalah plunkr untuk ini: https://plnkr.co/edit/WbzqDDOqN1oAhvqMkQRQ?p=preview .

Semoga bisa membantu Anda, Thierry

OrderByPipe yang diperbarui: diperbaiki bukan menyortir string.

buat kelas OrderByPipe:

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

di pengontrol Anda:

@Component({
pipes: [OrderByPipe]
})

atau di

 declarations: [OrderByPipe]

di html Anda:

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

ObjFieldName: nama bidang objek yang ingin Anda urutkan;

OrderByType: boolean; true: urutan menurun; false: naik;

Angular tidak datang dengan filter orderBy di luar kotak, tetapi jika kita memutuskan kita membutuhkannya, kita dapat dengan mudah membuatnya. Namun ada beberapa peringatan yang perlu kita waspadai terkait dengan kecepatan dan minifikasi. Lihat di bawah.

Pipa sederhana akan terlihat seperti ini.

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

Pipa ini menerima fungsi sortir (fn ), dan memberinya nilai default yang akan mengurutkan array primitif dengan cara yang masuk akal. Kami memiliki opsi untuk mengganti fungsi sortir ini jika diinginkan.

Itu tidak menerima nama atribut sebagai string, karena nama atribut tunduk pada minifikasi. Mereka akan berubah ketika kita mengecilkan kode kita, tetapi penambang tidak cukup pintar untuk juga mengecilkan nilai dalam string template.

Menyortir primitif (angka dan string)

Kita bisa menggunakan ini untuk mengurutkan array angka atau string menggunakan pembanding default:

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']
}

Menyortir larik objek

Jika kita ingin mengurutkan sebuah array objek, kita bisa memberinya fungsi komparator.

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

Peringatan - pipa murni vs. tidak murni

Angular 2 memiliki konsep pipa murni dan tidak murni.

Pipa murni mengoptimalkan deteksi perubahan menggunakan identitas objek. Artinya pipa hanya akan berjalan jika objek input berubah identitas, misalnya jika kita menambahkan item baru ke dalam array. Itu tidak akan turun ke objek. Ini berarti jika kita mengubah atribut bersarang: this.cats[2].name = "Fluffy"misalnya, pipa tidak akan dijalankan ulang. Ini membantu Angular menjadi cepat. Pipa sudut murni secara default.

Pipa yang tidak murni di sisi lain akan memeriksa atribut objek. Ini berpotensi membuatnya lebih lambat. Karena tidak dapat menjamin apa yang akan dilakukan fungsi pipa (mungkin diurutkan berbeda berdasarkan waktu, misalnya), pipa yang tidak murni akan berjalan setiap kali terjadi peristiwa asinkron.Ini akan sangat memperlambat aplikasi Anda jika arraynya besar.

Pipa di atas murni. Artinya, ini hanya akan berjalan jika objek dalam larik tidak dapat diubah. Jika Anda berganti kucing, Anda harus mengganti seluruh objek kucing dengan yang baru.

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

Kita dapat mengubah di atas menjadi pipa tidak murni dengan mengatur atribut murni:

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

Pipa ini akan turun menjadi objek, tetapi akan lebih lambat. Gunakan dengan hati-hati.

Saya telah membuat pipa OrderBy yang melakukan apa yang Anda butuhkan. Ini mendukung kemampuan untuk mengurutkan pada banyak kolom dari objek yang tak terhitung banyaknya juga.

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

Pipa ini memungkinkan untuk menambahkan lebih banyak item ke larik setelah merender laman, dan akan mengurutkan larik dengan pembaruan secara dinamis.

Saya telah menulis tentang prosesnya di sini .

Dan inilah demo yang berfungsi: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby dan https://plnkr.co/edit/DHLVc0?p=info

Sarankan Anda menggunakan lodash dengan sudut, maka pipa Anda akan menjadi yang berikutnya:

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

}

dan menggunakannya di html seperti

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

dan jangan lupa tambahkan Pipa ke modul Anda

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

Ini akan bekerja untuk bidang apa pun yang Anda berikan padanya. ( PENTING: Ini hanya akan mengurutkan menurut abjad jadi jika Anda melewati tanggal itu akan mengurutkan sebagai alfabet bukan sebagai tanggal)

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

Ini adalah pengganti yang baik untuk pipa orderby AngularJs di sudut 4 . Mudah dan sederhana untuk digunakan.

Ini adalah URL github untuk informasi lebih lanjut 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;
  }
}

Seperti yang kita ketahui filter dan urutan oleh dihapus dari ANGULAR 2 dan kita perlu menulis sendiri, berikut adalah contoh yang baik tentang plunker dan artikel terperinci

Ini digunakan baik filter maupun orderby, berikut adalah kode untuk pipa pesanan

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

Anda dapat menggunakan ini untuk objek:

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

}

Di package.json, tambahkan sesuatu seperti (Versi ini ok untuk Angular 2):

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

Dalam modul skrip Anda (dan impor array):

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

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

Dalam versi Angular2 saat ini, pipa orderBy dan ArraySort tidak didukung. Anda perlu menulis / menggunakan beberapa pipa khusus untuk ini.

Untuk Angular 5+ Version kita bisa menggunakan paket ngx-order-pipe

Tautan Tutorial Sumber

Instal paket

$ npm install ngx-order-pipe --save

Impor dalam modul aplikasi

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

gunakan dimana saja

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

orderby Pipe di Angular JS akan mendukung tetapi Angular (versi yang lebih tinggi) tidak akan mendukung . Temukan detailnya yang dibahas untuk meningkatkan kecepatan kinerja yang sudah usang.

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