Angular 5.2.9使用ngx-order-pipe排序异常求助

看起来你遇到的排序问题大概率是两个原因之一：要么是排序字段名和数组对象的属性不匹配，要么是没有针对混合数据类型做定制化的排序逻辑。我帮你一步步排查解决：

1. 先检查排序字段是否匹配 #

从你的HTML代码来看，循环里显示的是themeData.title，但你点击表头时设置的排序字段是'theme'。如果你的themeArr数组里的对象没有theme这个属性，而是用title存储主题名称，那排序肯定会不符合预期！

你需要把表头的点击事件和激活状态判断都改成对应title字段：

<thead class="text-primary">
  <th [class.active]="order === 'title'" (click)="setOrder('title')" class="curpointer" width="40%">
    Theme
    <i class="material-icons" *ngIf="order =='title'">{{ (reverse)?'expand_less':'expand_more' }}</i>
  </th>
</thead>

这样排序就会针对themeData.title字段生效，这是最容易忽略的基础问题。

2. 针对混合数据类型定制排序逻辑 #

如果你的排序字段确实是theme，但这个字段里混合了不同数据类型（比如数字编号和字符串名称），ngx-order-pipe默认的排序规则会把所有值当成字符串处理，导致数字排序混乱。这时候你需要自定义一个比较器函数来区分数据类型：

在你的组件类里添加这个比较函数：

customComparator(a: any, b: any): number {
  // 优先处理数字类型的排序
  if (typeof a === 'number' && typeof b === 'number') {
    return a - b;
  }
  // 字符串类型做不区分大小写的本地化排序
  else if (typeof a === 'string' && typeof b === 'string') {
    return a.localeCompare(b, undefined, { sensitivity: 'base' });
  }
  // 不同类型的话，把数字放在字符串前面（可根据需求调整）
  else {
    return typeof a === 'number' ? -1 : 1;
  }
}

然后在HTML的orderBy管道里传入这个自定义比较器：

<tr *ngFor="let themeData of themeArr | orderBy: order:reverse:'case-insensitive':customComparator | filter:filter | paginate: { itemsPerPage: 10, currentPage: p };">

3. 确认版本兼容性 #

别忘了ngx-order-pipe的版本要和Angular 5.2.9匹配，Angular 5对应的是ngx-order-pipe 2.x版本（3.x及以上是给Angular 6+用的）。如果你的版本不对，也可能出现奇怪的排序问题，可以通过npm list ngx-order-pipe检查版本，不匹配的话重新安装对应版本：

npm install ngx-order-pipe@2.1.1 --save

按照上面的步骤排查，应该就能解决你的排序不符合预期的问题了。

内容的提问来源于stack exchange，提问作者Abhranil Majumder