web-dev-qa-db-ja.com

angular 5、orderBy asc / desc

OrderByパイプのasc/descによる並べ替えを変更するオプションはありますか？

配列：

this.testArr = [{name: 'bbb', id: '1'}, {name: 'ccc', id: '2'}, {name: 'aaa', id: '0'}];

HTMLの場合：

<ul><li *ngFor="let item of testArr | orderBy: 'id' : true"><div>{{item.id}}</div></li></ul>

'true'を 'false'/'asc'/'desc'に置き換えても機能しませんでした。必要な出力は、0、1、2であり、他のパラメーターは2、1、0です。

ありがとうございました。

angular5angularjs-orderby
3
user636312

angularガイドでは、パフォーマンスと縮小の問題のため、パイプを使用しないことを推奨しています- https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe ==

推奨される方法は、コンポーネントにフィルター/ソートメソッドを含めることです。

sortAccounts(prop: string) {
    const sorted = this.accounts.sort((a, b) => a[prop] > b[prop] ? 1 : a[prop] === b[prop] ? 0 : -1);
    // asc/desc
    if (prop.charAt(0) === '-') { sorted.reverse(); }
    return sorted;
}

次に、コンポーネントビューで

<li *ngFor="let a of sortAccounts('id')">

または

<li *ngFor="let a of sortAccounts('-id')">
5
Horse

次のコードを試してください。並べ替え用のカスタムパイプを作成できます。

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

@Pipe({
    name: 'orderBy'
})
export class OrderBy{

 transform(array, orderBy, asc = true){

     if (!orderBy || orderBy.trim() == ""){
       return array;
     } 

     //ascending
     if (asc){
       return Array.from(array).sort((item1: any, item2: any) => { 
         return this.orderByComparator(item1[orderBy], item2[orderBy]);
       });
     }
     else{
       //not asc
       return Array.from(array).sort((item1: any, item2: any) => { 
         return this.orderByComparator(item2[orderBy], item1[orderBy]);
       });
     }

 }

 orderByComparator(a:any, b:any):number{

     if((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))){
       //Isn't a number so lowercase the string to properly compare
       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
 }
}

。component.ts

list = [
    {
        name:"Terry",
        age:23
    },
    {
        name:"Bob",
        age:25
    }
    {
        name:"Larry",
        age:27
    }
];

order = "age";
ascending = true;

。html

<div *ngFor="let person of list | orderBy:order:ascending">
    Name: {{person.name}}, Age: {{person.age}}
</div>
0
Vignesh