角度、类型错误:无法读取未定义的属性'sort'。

i'm trying to make a sorting function and pipe for a table by following this link and here is the plunker of that example. From the example that i'm following the table header should be clickable and do the sort() function. My pipe name is prdSort. I'm also using ngx-pagination but i don't think that the main cause of this error.

我试图根据这个链接为一个表创建一个排序函数和管道这是那个例子的柱塞。从我正在跟踪的示例中，应该可以单击并执行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;
  });
};

I alse already included the pipe file to app.module.ts. Please let me know if more snippets are needed.

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

3 个解决方案

#1

Try to initialize your productList with an empty array:

尝试用一个空数组初始化您的productList:

// component.ts:

productList: Product[] = [];

For more security, to prevent calling array.prototype.sort on a variable that is undefined instead of an array, you can add the code below in your filter:

要获得更多的安全性，请避免调用array.prototype。对未定义的变量排序，而不是数组排序，您可以在过滤器中添加以下代码:

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

#2

As @Faly answered this almost perfectly, but your pipe use is invalid in my guess.

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

From this

从这个

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

Change to this

改变这个

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

(Pass arguments changed.)

(传递参数改变。)

Also from @Faly

同样来自@Faly

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

Explaination: When you look at your error ERROR TypeError: Cannot read property 'sort' of undefined at PrdSortPipe.transform you are trying to use sort function on undefined due to in my guess badly passed args to pipe. So your pipe gets undefined value on which can't be executed sort method. Look at this answer about multiple args in pipe.

解释:当您查看错误类型错误时:无法在PrdSortPipe中读取属性‘sort’。转换您正在尝试对未定义的对象使用排序函数，因为在我的猜测中，将args传递给管道的方式很糟糕。因此，您的管道将获得无法执行排序方法的未定义值。看看这个关于管道中多个args的答案。

#3

change the prdSort filter to pass only the property name which you want to be sorted.

更改prdSort过滤器只传递您想要排序的属性名称。

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

You can also include pagination too in the same line

您还可以在同一行中包含分页

#1