Angular8使用ngx-order-pipe排序嵌套对象数组找不到orderBy管道

解决步骤 #

1. 修复找不到orderBy管道的问题 #

出现这个报错的核心原因是ngx-order-pipe的依赖没有被正确导入到你组件所属的模块中，按以下步骤操作：

• 首先确认依赖已安装，在项目根目录执行安装命令：

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

  这里指定2.2.0版本是为了兼容Angular 8，避免版本不兼容问题。
• 打开你TableComponent所属的NgModule文件（如果是全局用就改app.module.ts，如果是特性模块就改对应子模块文件），导入并注册OrderModule：

  import { OrderModule } from 'ngx-order-pipe';
  
  @NgModule({
    declarations: [
      TableComponent
    ],
    imports: [
      // 其他已有的导入项
      OrderModule
    ]
  })
  export class YourModule { }
  

2. 修复模板变量不匹配问题 #

你组件中定义的输入数组变量名为suministros，但模板中遍历用的是supplies，变量名不一致，修改*ngFor代码：

<tr *ngFor="let element of suministros | orderBy: orderHeader: reverse" >

这里同时把你写死的false替换为组件中定义的reverse变量，点击排序的反转逻辑才能正常生效。

3. 嵌套对象字段排序用法 #

ngx-order-pipe原生支持点分隔的嵌套属性路径，如果你要按嵌套的supply下的字段排序，直接传入对应路径即可，比如要按supply下的coln2排序，调用sort方法时传参：

<span class="sort" (click)="sort('supply.coln2')">

管道会自动解析嵌套路径完成排序。

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