我正在尝试根据此链接中的代码编写排序管道: http://www.advancesharp.com/blog/1211/angular-2-search-and-sort-with-ngfor-repeater-with-example 尽管我在处理未定义的值时遇到了麻烦。我的管道在没有任何未定义值的列上正常工作。但是当列管道中至少有一个未定义的值时，会以一种奇怪的方式工作。 我的代码如下:

html 模板:

*ngFor="let candidate of filteredList | orderBy:{property: column, direction: direction}"

在html模板中选择列和方向例如:

<th class="pointer" nowrap="nowrap" (click)="sort('lastName')">{{ 'candidates.candidates' | translate }}
      <i class="fa" [ngClass]="{'fa-sort': column != 'lastName',
                        'fa-sort-asc': (column == 'lastName' && !isDesc),
                        'fa-sort-desc': (column == 'lastName' && isDesc) }"
         aria-hidden="true"> </i></th>

order-by.pipe.ts

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

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

  transform(candidates: Array<object>, args?: any): any {
    candidates = candidates || [];
    return candidates.sort(function (a, b) {

      if (a[args.property] === b[args.property]) {
        return 0;
      }
      if (a[args.property] === '' || a[args.property] === null || typeof a[args.property] === 'undefined') {
        return 1;
      }
      if (b[args.property] === '' || b[args.property] === null || typeof b[args.property] === 'undefined') {
        return -1;
      }
      if (a[args.property] < b[args.property]) {
        console.log(a[args.property] + ' wartosc property');
        return -1 * args.direction;
      } else if (a[args.property].toLowerCase() > b[args.property].toLowerCase()) {
        return 1 * args.direction;
      } else {
        return 0;
      }
    });
  }
}

组件.ts:

public sort(property: string) {
    this.isDesc = !this.isDesc;
    this.column = property;
    this.direction = this.isDesc ? 1 : -1;
  }

我尝试了很多不同的方法，但没有一个能正常工作。

最佳答案

可以用lodash来排序吗？

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash';

@Pipe({
    name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

    transform(array: Array<{}>, args: string[]): Array<string> | Array<{}> {

        array = array || [];

        if (typeof args === 'undefined' || args.length !== 2) {
            return array;
        }

        const [key, direction] = args;

        if (direction !== 'ASC' && direction !== 'DESC') {
            return array;
        }

        return _.orderBy(array, (item:any) => item[key], direction.toLowerCase());
    }
}

关于angular - Angular 为 4 的 OrderBy 管道，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48060467/