Masalah pipa OrderBy


98

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 menemukan paket modul ini untuk OrderBy di Angular5 + versi freakyjolly.com/…
Code Spy

Jawaban:


79

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.


1
Aku punya pesan: The pipe 'sort' could not be found. Dapatkah saya menyuntikkan pipa ke komponen saya seperti di pipa 2 sudut: [ArraySortPipe]?
Matija Župančić

Lihat respons @Thierry Templier tentang cara menyuntikkan pipa ke komponen aplikasi Anda
Sal

Anda perlu menyertakan "ArraySortPipe" dalam deklarasi hierarki modul Anda. Sesuatu seperti: impor {ArraySortPipe} dari './../../shared/filters.pipe'; Di 'app.module.ts' dan modul apa pun di bawahnya. put: declarations: [ArraySortPipe]
Dudi

72

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. "


7
Bagaimana seharusnya Anda memindahkan logika "ke dalam komponen itu sendiri" dengan cara yang dapat "mengontrol kapan dan seberapa sering logika pendukung dijalankan"? Apakah ada contoh bagus untuk diikuti?
Mzzzzzz

1
@Mzzzzzz Di mana ia menyebutkan properti seperti filteredHeroesdan sortedHeroes, menurut saya idenya adalah bahwa saat menginisialisasi komponen Anda akan menjalankan beberapa logika penyortiran / pemfilteran (mungkin memanggil metode dari ngOnInit), lalu menyetel properti itu dengan hasil yang diurutkan / difilter, dan hanya menjalankan ulang logika / memperbarui properti jika ada sesuatu yang memicu kebutuhan (misalnya, interaksi pengguna memicu panggilan AJAX untuk mendapatkan lebih banyak pahlawan, atau pengguna mengklik kotak centang untuk memfilter setengah dari mereka berdasarkan beberapa kriteria, dll.)
jmq

42

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


1
Terima kasih atas jawaban Anda, dapatkah Anda menjelaskan metode pengurutan?

1
Sebenarnya sortmetode tersebut adalah metode Arrayobjek JavaScript . Lihat tautan ini: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… .
Thierry Templier

Ok saya mengerti, itu menggunakan metode sortir javascript dengan fungsi bandingkan sebagai argumen. Terima kasih!

1
Sayangnya plunker sudah usang. Thierry?

4
yang pipes: [..]deklarasi tidak berlaku lagi (dan tidak lagi diperlukan)
phil294

9

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;


Untuk argumen string yang membandingkan [orderField] - b [orderField] mengembalikan NaN
Piotr Pęczek

Untuk argumen tanggal itu tidak berhasil. Format tanggal sebagai teks tidak diurutkan dengan benar.
Rafael Pizao

9

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.


Terima kasih .. Banyak membantu. Tapi satu pertanyaan .. Jika kita tidak boleh menggunakan pipa atau filter untuk menyortir, apa pendekatan terbaik? Saya cari kemana-mana, semuanya memberi solusi dengan membuat pipa.
Pavan Shukla

@PavanShukla Anda dapat menggunakan pipa, cukup pastikan entri array Anda tidak dapat diubah dan buat pipa murni. Atau, jika Anda tidak memiliki array yang besar, buat pipa yang tidak murni dan urutkan setiap render. Bergantian, buat array yang diurutkan sebagai atribut komponen Anda dan render itu.
superluminary

Saya telah menggunakan logika array.sort dengan mengklik setiap heading cloumn. Saya melakukan operasi ini pada larik data tampilan .. apakah ini cara yang baik?
Pavan Shukla

7

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


Anda tidak menangani nilai null.
Ali Habibzadeh

jika (a == null) a = 0; jika (b == null) b = 0;
Ali Habibzadeh

Juga nilai-nilai dengan nilai yang sama bergerak dan bergerak saat Anda mengklik di antarmuka
Ali Habibzadeh

@XGreen terima kasih untuk ini. Saya akan menambahkan dukungan untuk nilai null / undefined di update berikutnya dari fuel-ui. Adapun kegoncangan dari nilai-nilai yang sama, saya tidak melihat ini. Browser apa yang Anda gunakan?
Cory Shaw

Versi Chrome 50.0.2661.86 (64-bit), OSX El Capitan
Ali Habibzadeh

4

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, ...],
    ...
})

Saya suka pendekatan Anda Александр Петрик tetapi saya lebih suka mengirim array pada template: orderBy: ['field1', 'field2'] Dan kemudian memanggil pipa: return _.sortBy (array, args);
Eric

1
Masalah menggunakan _.sortBy adalah Anda tidak dapat menentukan urutan turunan. Saya telah menemukan bahwa menggunakan _.orderBy Anda dapat menentukan urutan kustom untuk setiap bidang. yaitu: _.orderBy (array, ['field1', 'field2'], ['asc', 'desc'])
Eric

3

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

Bisakah Anda memposting contoh penggunaan?
TheUnreal

Saya tidak dapat mengkompilasi kode yang Anda berikan. Saya mendapatkan pesan kesalahan yang mengatakan bahwa @Componenttidak memiliki pipesproperti.
Azimuth

3

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

2

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

2

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

}

2

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

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

1
Terima kasih, jawaban bagus
AM - EVS

0

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


0

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>


-1
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;
  }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.