Question

我试图按照this link为表格制作排序函数和管道，这里是该示例的plunker。从示例中我可以点击表头后面的sort()函数。我的管道名称是prdSort。我也使用ngx-pagination，但我不认为这是错误的主要原因。

＆＃13;

//part of service.ts
productList: AngularFireList < any > ;
//end

//component.ts
productList: Product[];

isDesc: boolean = false;
column: string = 'prdName';
records = this.productList
sort(property) {
  this.isDesc = !this.isDesc; //change the direction    
  this.column = property;
  let direction = this.isDesc ? 1 : -1;
};

＆＃13;

<!-- table header -->
<th (click)="sort('prdName')">Name</th>

<!--table row-->
<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} ">

＆＃13;

//pipe.ts

transform(records: any, args ? : any): any {

  return records.sort(function(a, b) {
    if (records !== undefined) {
      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;
      }
    }
    return records;
  });
};

＆＃13;

我已将管道文件包含到app.module.ts。如果需要更多代码段，请告诉我。

Answer 1

尝试使用空数组初始化productList：

// component.ts:

productList: Product[] = [];

为了更安全，要防止在未定义的变量而不是数组上调用 array.prototype.sort ，您可以在过滤器中添加以下代码：

transform(records: any, args ? : any): any {
    records = records || [];  // set records to an empty array if undefined
    return records.sort(function(a, b) { ... });
}

Answer 2

由于@Faly几乎完美地回答了这个问题，但我猜测你的管道使用无效。

从此

this.cities = _.filter(this.cities, (city) => {
    return city.distance > 5;
});

更改为

<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} ">

（传递参数已更改。）

同样来自@Faly

<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: column : direction ">

解释：当您查看错误transform(records: any, args ? : any): any { records = records || []; // set records to an empty array if undefined return records.sort(function(a, b) { ... }); }时，您正试图在ERROR TypeError: Cannot read property 'sort' of undefined at PrdSortPipe.transform上使用sort函数，原因是我的猜测严重错误地传递给了管道。因此，您的管道会获得未定义的值，而不能执行undefined方法。请查看此answer有关管道中多个参数的信息。

Answer 3

更改prdSort过滤器以仅传递要排序的属性名称。

<tr *ngFor="let product of productList |  prdSort: 'prdName' ">

您也可以在同一行中添加分页

Angular，TypeError：无法读取属性＆＃39; sort＆＃39;未定义的

3 个答案: