web-dev-qa-db-ja.com

昇順と降順の並べ替えAngular 4

ソート機能が機能しているのはなぜですか：

<th (click)="sort('transaction_date')">Transaction Date <i class="fa" [ngClass]="{'fa-sort': column != 'transaction_date', 'fa-sort-asc': (column == 'transaction_date' && isDesc), 'fa-sort-desc': (column == 'transaction_date' && !isDesc) }" aria-hidden="true"> </i></th>

これが機能していない間：

<th (click)="sort('user.name')">User <i class="fa" [ngClass]="{'fa-sort': column != 'user.name', 'fa-sort-asc': (column == 'user.name' && isDesc), 'fa-sort-desc': (column == 'user.name' && !isDesc) }" aria-hidden="true"> </i></th>

html

 <tr *ngFor="let inner of order.purchase_orders | orderBy: {property: column, direction: direction}">
        <td>{{ inner.transaction_date | date  }}</td>
        <td>{{ inner.user.name  }}</td>
 </tr>

ts

sort(property){
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    this.direction = this.isDesc ? 1 : -1;
    console.log(property);
  };

パイプ

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

@Pipe({
  name: 'orderBy'
})

export class OrderByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {
    if(records && records.length >0 ){
    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;
          }
        });
      }
    };
}

前もって感謝します。

angularangular-servicesangular-pipe
5
Gray Singh

ここでの問題は：

オブジェクトのネストされたプロパティ、orderByは、プロパティの第1レベルに基づいて並べ替えを提供する必要があります

innerは次のようになりますが、

_{
    transaction_date : '10/12/2014'
    user : {
        name : 'something',
        ...
    }
}
_

このオブジェクトを次のように作成してみてください。最初のレベルですべての並べ替え可能なプロパティを取得します（ORその方法でorderByを変更する必要があります）

_{
    transaction_date : '10/12/2014'
    user_name : 'something',
    user : {
        name : 'something',
        ...
    }
}
_

そして、試してみてください。

_<th (click)="sort('user_name')">
    User <i class="fa" [ngClass]="{'fa-sort': column != 'user_name', 
                                    'fa-sort-asc': (column == 'user_name' && isDesc), 
                                    'fa-sort-desc': (column == 'user_name' && !isDesc) }" 
            aria-hidden="true"> 
        </i>
</th>
_

次のように、records.map(record => record['user_name'] = record.user.name);をtransform関数に追加します。

これは私が提案したようにオブジェクトを作ります：

_export class OrderByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {
    if(records && records.length >0 ){

    records.map(record => record['user_name'] = record.user.name); // add here

    return records.sort(function(a, b){
        ....
      }
    };
}
_
3
Vivek Doshi