Angular，TypeError：无法读取未定义的属性“排序”

Question

我正在尝试按照this link 为表格创建排序功能和管道，这是该示例的plunker。在我关注的示例中，表头应该是可点击的并执行sort() 功能。我的管道名称是prdSort。我也在使用ngx-pagination，但我认为这不是导致此错误的主要原因。

//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;
};

<!-- 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} ">

//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;
  });
};

我也已经将管道文件包含在app.module.ts 中。如果需要更多 sn-ps，请告诉我。

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 几乎完美地回答了这个问题，但我猜你的管道使用无效。

从这里

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

改成这个

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

（传递参数已更改。）

同样来自@Faly

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 时，您正试图在undefined 上使用sort 函数，因为我猜想错误地将args 传递给管道。因此，您的管道获得了无法执行 sort 方法的未定义值。看看这个answer 关于管道中的多个参数。

Answer 3

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

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

你也可以在同一行中包含分页