Angular 4 中的升序和降序排序
Ascending and Descending Sort in 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);
};
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
我在考虑,inner
应该是这样的,
{
transaction_date : '10/12/2014'
user : {
name : 'something',
...
}
}
试着让这个对象像,把所有可排序的放在第一层属性
(或者您必须以这种方式更改 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){
....
}
};
}
为什么排序功能有效:
<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
我在考虑,inner
应该是这样的,
{
transaction_date : '10/12/2014'
user : {
name : 'something',
...
}
}
试着让这个对象像,把所有可排序的放在第一层属性 (或者您必须以这种方式更改 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){
....
}
};
}