Angular 7-具有NESTED对象数组的ngFor的orderBy管道

时间:2019-05-17 15:11:21

标签: angular angular7

技术:Angular 7和angularcli。

我需要的结果:

我需要一个管道,该管道以 byby 字段名称,并按升序/降序排列。

当前不适用于数组中的嵌套对象。 仅适用于字符串。

我需要它来处理这个没有花哨的数组:

this.items = [
 {
   id: 1, client: { name: 'dave' }, name: 'john', owner: { name: 'pete' }, 
 },
 {
   id: 3, client: { name: 'steve' }, name: 'mike', owner: { name: 'pete' }, 
 }
];

这是我当前的管道:

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

@Pipe({
  name: 'sort'
})
export class OrderByPipe implements PipeTransform {
  transform( array: Array<any>, orderField: string, orderType: boolean ): Array<string> {
    array.sort( ( a: any, b: any ) => {
        let ae = a[ orderField ];
        let be = b[ orderField ];
        if ( ae == undefined && be == undefined ) return 0;
        if ( ae == undefined && be != undefined ) return orderType ? 1 : -1;
        if ( ae != undefined && be == undefined ) return orderType ? -1 : 1;
        if ( ae == be ) return 0;
        return orderType ? (ae.toString().toLowerCase() > be.toString().toLowerCase() ? -1 : 1) : (be.toString().toLowerCase() > ae.toString().toLowerCase() ? -1 : 1);
    } );
    return array;
  }
}

我的HTML语言:

 <tr class="child-row" *ngFor="let item of items | sort:orderByField:orderByType">
            <td>{{ item.id }}</td>
            <td>{{ item.client.name }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.owner.name }}</td>
          </tr>

0 个答案:

没有答案