typescript Angular，TypeError：无法读取未定义的属性“排序”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47386824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular, TypeError: Cannot read property 'sort' of undefined
提问by Wira Xie
i'm trying to make a sorting function and pipe for a table by following this linkand here is the plunkerof 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-paginationbut i don't think that the main cause of this error.
我正在尝试按照此链接为表格创建排序功能和管道，这是该示例的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;
});
};I alse already included the pipe file to app.module.ts. Please let me know if more snippets are needed.
我也已经将管道文件包含到app.module.ts. 如果需要更多片段，请告诉我。
回答by Faly
Try to initialize your productList with an empty array:
尝试使用空数组初始化您的 productList：
// component.ts:
productList: Product[] = [];
For more security, to prevent calling array.prototype.sorton a variable that is undefined instead of an array, you can add the code below in your filter:
为了更安全，为了防止对未定义的变量而不是数组调用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) { ... });
}
回答by Patryk Brejdak
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.transformyou are trying to use sortfunction on undefineddue to in my guess badly passed args to pipe. So your pipe gets undefined value on which can't be executed sortmethod. Look at this answerabout multiple args in pipe.
解释：当您查看错误时，ERROR TypeError: Cannot read property 'sort' of undefined at PrdSortPipe.transform您正尝试使用sort函数，undefined因为我猜测将 args 错误地传递给管道。因此，您的管道获得了无法执行的sort方法的未定义值。看看这个关于管道中多个参数的答案。
回答by Prithivi Raj
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
您也可以在同一行中包含分页
