Angular使用javascript进行排序管道

Question

我在 Angular2 中构建排序管道时有一个问题 这是我的管道代码：

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

@Pipe({
  name: 'sort'
})
export class SortPipe implements PipeTransform {

  transform(value: any, propName: string): any {

    return value.sort((a,b)=> {
      return a[propName]-b[propName];
      // if(a[propName]>b[propName]) {
      //   return 1;
      // } else {
      //   return -1;
      // }
    });        
  }      
}

当我在 cmets 中使用代码时，管道可以工作，但是当我使用 return a [propName]-b[propName]; 时它不工作；

Answer 1

要使排序工作，您必须返回一个整数 (see reference)。您确定减去您的属性将始终返回这些值吗？

Answer 2

取决于您要排序的内容。如果该值是一个数字，它应该可以工作。如果是字符串，则返回 NaN。第二种解决方案更好。

Answer 3

此代码选择管道传入的 items 对象列表的属性，并考虑空值。

您可以在下面看到带有 *ngFor 的管道：

<tr *ngFor="let item of Clients | sort: sortType: sortDirection">

您可以在下面看到当点击列标题时，箭头改变箭头的方向并使排序输出在排序管道内升序或降序。

<th>
        <div class="d-flex flex-row hoverOver">
          <span class="text-nowrap">Quantity</span>
          <i class="fa hoverTrans align-self-center mx-1" [ngClass]="{'fa-arrows-v': column != 'created',
            'fas fa-long-arrow-up': !sortDirection,
            'fas fa-long-arrow-down': sortDirection }" (click)="sortType = 'qty'; sortDirection = !sortDirection">
          </i>

下面是排序管道：

transform(items: any, sortType: any, sortDirection: any): any {

    const direction = sortDirection ? -1 : 1;

    items.sort((a, b) => {
      if (a[sortType] < b[sortType] || (a[sortType] === null && b[sortType] !== null) || (a[sortType] === "" && b[sortType] !== null)) {
        return -1 * direction;
      } else if (a[sortType] > b[sortType] || (a[sortType] !== null && b[sortType] === null) || (a[sortType] !== null && b[sortType] === "")) {
        return 1 * direction;
      } else {
        return 0;
      }
    });

    return items;
  }