Angular 2排序表列

Question

我正在尝试使用 Angular 2 对表格中的列进行排序

管道变换代码是

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({  name: 'orderBy' })
export class OrderByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {

    return records.sort(function(a, b){
      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;
      }
    });
  };
}

我在component.ts文件中定义了一个排序函数，如下：

  sort(property){
    this.isDesc = !this.isDesc; //change the direction
    this.column = property;
    this.direction = this.isDesc ? 1 : -1;
    //this.sort(this.column);
  };

HTML 看起来像这样

 <th class="cell-width-header title" (click)="sort(sellerNo)">
            Seller No
            <i class="fa" [ngClass]="{'fa-sort': column != 'sellerNo', 'fa-sort-asc': (column == 'sellerNo' && isDesc), 'fa-sort-desc': (column == 'sellerNo' && !isDesc) }" aria-hidden="true"> </i>
          </th>




 <tr *ngFor="let x of selectedData  | orderBy: {property: column, direction: direction}">


            <td>{{x.sellerNo}}</td>

但在加载页面后，我收到以下错误

zone.js:522 未处理的承诺拒绝：./FundingRequestComponent 类 FundingRequestComponent 中的错误 - 内联模板：208:14 原因：无法读取未定义的属性“排序”；区域：角度；任务：Promise.then；价值： ViewWrappedError {__zone_symbol__error: Error: Error in ./FundingRequestComponent class FundingRequestComponent - inline template:208:14 cau……} 错误：./FundingRequestComponent 类 FundingRequestComponent 中的错误 - 内联模板：208:14 原因：无法读取未定义的属性“排序” 在 ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6688:33) 在 ViewWrappedError.BaseError [作为构造函数] (http://localhost:4200/vendor.bundle.js:94913:16) 在 ViewWrappedError.WrappedError [作为构造函数] (http://localhost:4200/vendor.bundle.js:94978:16) 在新的 ViewWrappedError (http://localhost:4200/vendor.bundle.js:96282:16)

Answer 1

我假设您在组件的类中异步加载此模板的数据 (selectedData)，因此在开始时它尚未从服务返回，因此是 selectedData = undefined。

您可以采取多种措施来缓解这种情况：

1。初始化组件中的数据

将selectedData 类属性设置为一个空数组，这样当管道运行时，即使尚未返回后端数据，它的输入也将是一个数组。

export class MyComponent {
    selectedData = [];
}

2。使用*ngIf 阻止评估模板的这一部分

在拥有数组之前，不要使用所述管道渲染模板部分。

<table *ngIf="selectedData">
  <!-- ... -->
  <tr *ngFor="let x of selectedData  | orderBy: {property: column, direction: direction}">
</table>

3。通过提供默认输入使管道“空输入安全”

这应该是首选解决方案，因为这样您就不必记住每次都使用任何特殊逻辑（如 ver. 1 或 ver. 2）你在某处使用这个管道。

@Pipe({  name: 'orderBy' })
export class OrderByPipe implements PipeTransform {
  transform(records: Array<any> = [], args?: any): any {
    /* ... */

看到transform的方法参数中的records = []默认值了吗？

我尝试将此用作一般经验法则，以始终准备好管道以防止最初没有输入。让很多头痛消失了:)