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

Posted 2023-03-05

【中文标题】Angular，TypeError：无法读取未定义的属性“排序”

【英文标题】：Angular, TypeError: Cannot read property 'sort' of undefined

【发布时间】：2018-05-03 08:46:50

【问题描述】：

我正在尝试按照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，请告诉我。

【问题讨论】：

请在此处粘贴来自console 的错误。请复制粘贴。查看您的标题sort of undefined 指向您管道中的标题records 未定义，因此无法执行排序。

ERROR TypeError: Cannot read property 'sort' of undefined at PrdSortPipe.transform (prd-sort.pipe.ts:13) at checkAndUpdatePureExpressionInline (core.js:12899) at checkAndUpdateNodeInline (core.js:13602) at checkAndUpdateNode (core.js:13541) at debugCheckAndUpdateNode (core.js:14413) at debugCheckDirectivesFn (core.js:14354) at Object.eval [as updateDirectives] (ProductComponent.html:63) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339) at checkAndUpdateView (core.js:13508) at callViewAction (core.js:13858)

【参考方案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)  ... );

【参考方案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 关于管道中的多个参数。

【参考方案3】：

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

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

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