Angular 4 中的升序和降序排序 [英] Ascending and Descending Sort in Angular 4

问题描述

为什么排序函数起作用了:

 交易日期 </i></th>

虽然这个不起作用:

User </i></th>

<块引用>

html

 <td>{{inner.transaction_date |日期}}</td><td>{{inner.user.name }}</td></tr>

<块引用>

ts

sort(property){this.isDesc = !this.isDesc;//改变方向this.column = 属性；this.direction = this.isDesc ?1:-1；控制台日志(属性)；};

<块引用>

管道

import {Pipe, PipeTransform} from '@angular/core';@管道({名称:'orderBy'})导出类 OrderByPipe 实现 PipeTransform {变换(记录:数组<任何>，args?:任何):任何{if(records &&records.length >0 ){返回记录排序(函数(a，b){if(a[args.property] < b[args.property]){返回 -1 * args.direction;}else if( a[args.property] > b[args.property]){返回 1 * args.direction;}别的{返回0；}});}};}

提前致谢.

解决方案

这里的问题是:

对象的嵌套属性，orderBy 必须提供排序一级属性的基础

我在考虑，inner应该是这样的，

<代码>{交易日期:'10/12/2014'用户:{名称:'东西'，...}}

尽量使这个对象像，在第一级取所有可排序的属性(或者你必须通过这种方式改变顺序)

<代码>{交易日期:'10/12/2014'用户名:'东西'，用户:{名称:'东西'，...}}

然后尝试.

用户 <i class="fa" [ngClass]="{'fa-sort': column !='user_name','fa-sort-asc': (column == 'user_name' && isDesc),'fa-sort-desc': (column == 'user_name' && !isDesc) }"咏叹调隐藏=真"></i></th>

<小时>

将 records.map(record => record['user_name'] = record.user.name); 添加到您的 transform 函数中，如下所示:

这将按照我的建议制作对象:

导出类 OrderByPipe 实现 PipeTransform {变换(记录:数组<任何>，参数?:任何):任何{if(records &&records.length >0 ){record.map(record => record['user_name'] = record.user.name);//在这里添加返回记录排序(函数(a，b){....}};}

Why is it that sort function is working :

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

WHILE THIS ONE ISN'T WORKING :

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

Thanks in advance.

解决方案

The issue here is :

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

I am considering, inner should be look like this,

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

try to make this object like, take all sortable property on first level ( OR you must have to change the orderBy that way )

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

And try.

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

---

Add records.map(record => record['user_name'] = record.user.name); , to your transform function , like this :

This will make the object as I suggested :

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

这篇关于Angular 4 中的升序和降序排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！