javascript - 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 未处理的 Promise 拒绝:./FundingRequestComponent 类 FundingRequestComponent 中出现错误 - 内联模板:208:14 导致:无法读取未定义的属性“排序”；区域:有 Angular ；任务:Promise.then；值(value): ViewWrappedError {__zone_symbol__error:错误:./FundingRequestComponent 类 FundingRequestComponent 中出现错误 - 内联模板:208:14 原因……} 错误:./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。通过提供默认输入使管道“空输入安全”

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

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

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

我尝试将此作为一般经验法则，以始终为管道做好最初不获取输入的准备。让很多头痛消失:)