如何在Angular项目的ngx-datatable中动态设置排序值？

步骤1：调整组件模板绑定 #

给现有ngx-datatable新增[sorts]属性绑定，用于动态赋值排序规则：

<ngx-datatable #tableworkorder class="material" [rows]="this.gridWork"
                [sortType]="'multi'" [columnMode]="'force'" [loadingIndicator]="loadingIndicator"
                [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [scrollbarH]="true"
                [limit]="this.pageSize" [externalPaging]="true" [count]="this.itemCount"
                (activate)="onActivate($event)" [offset]="this.pageNumber"
                (page)="workPagination($event)" (resize)="onColumnResize($event)" (sort)="onSortGrid($event)"
                [sorts]="currentSorts"> <!-- 新增这行排序绑定 -->
</ngx-datatable>

步骤2：排序时存储参数 #

在你已有的onSortGrid排序事件中，新增参数存储逻辑，推荐用sessionStorage（页面关闭自动清除，避免跨会话残留），也可根据需求换成localStorage或者Angular共享服务：

// 组件类中定义绑定用的排序变量
currentSorts: Array<{prop: string, dir: 'asc'|'desc'}> = [];

onSortGrid(event: any): void {
  // 存储排序参数，event.sorts就是ngx-datatable返回的完整排序规则
  sessionStorage.setItem('workorder_table_sort', JSON.stringify(event.sorts));

  // 你原有排序后的业务逻辑（比如调用后端接口拉取排序后数据）照常保留
}

步骤3：页面初始化时恢复排序 #

在页面初始化钩子（ngOnInit/ngAfterViewInit）中读取存储的排序规则，赋值给绑定变量即可自动触发表格排序：

ngOnInit(): void {
  // 读取已存储的排序参数
  const savedSort = sessionStorage.getItem('workorder_table_sort');
  if (savedSort) {
    this.currentSorts = JSON.parse(savedSort);
    // 如果是服务端排序，这里直接把currentSorts作为参数传给数据接口即可
    this.loadTableList(this.currentSorts);
  }
}

可选优化 #

如果需要在离开列表页时清除排序状态，可在路由离开钩子中添加清除逻辑：

ngOnDestroy(): void {
  sessionStorage.removeItem('workorder_table_sort');
}

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