Angular 4中的升序和降序排序

发布时间：2020-12-17 10:25:23 所属栏目：安全来源：网络整理

导读：为什么sort函数工作正常： 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_da

为什么sort函数工作正常：

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

pipe

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

提前致谢.

The issue here is :

Nested property of object,orderBy must be providing the sorting on
the basis of first level of properties

我在考虑,内心应该是这样的,

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

尝试使这个对象像,在第一级采取所有可排序的属性
(或者你必须改变顺序)

{
    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);,对你的转换函数,像这样：

这将使我建议的对象：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!