Angular 自定义标头Ag网格中的排序编号？

Ag grid column api是否有关于自定义标题组件中排序顺序号的信息？

请检查以下内容：

您可以使用

CustomHeaderComponent

中的

IHeaderParams

获取它

对列进行排序，然后按住Shift键。您可以看到排序正在进行，数组或列正在控制台中以适当的顺序进行标记

onSortChanged() {
  console.log(this.params.api.sortController.getColumnsWithSortingOrdered());
}

---

现在，您可以添加逻辑以在自定义标头组件中设置适当的排序顺序。

我已使用纯js解决了此问题。 它可能对某人有用。 请检查此处的示例plunk： 我使用此方法获取排序编号并将其添加到DOM：

checkSortOrder() {
const sortingArray = this.params.api.getSortModel();
let j: number;
if (sortingArray.length > 1) {
  setTimeout(() => {
    for (j = 0; j < sortingArray.length; j++) {
      this.sortNumber = j + 1;
      const sortingDom = <HTMLElement>document.getElementById('sortingOrder' + sortingArray[j].colId.replace(/\s/g, ''))
      sortingDom.innerHTML = this.sortNumber.toString();
    }
  });
}

checkSortOrder（）{
const sortingArray=this.params.api.getSortModel（）；
设j：数字；
如果（sortingArray.length>1）{
设置超时（（）=>{
对于（j=0；j

---

}

我们必须将事件监听器连接到网格api的

sortChange

事件，而不是列api。这是因为sortNumber可以根据单击不同的列来更改。你可以看到。在下面的示例中，使用网格api

sortChange

的rxjs

fromEvent

创建了一个事件流，该事件流通过管道传输到此列的sortNumber的自定义计算

此解决方案使用ag grid的可用公共API进行类型检查。在当前的Api中，我们不应该使用列的私有属性

sort

和

sortedAt

，但是我们有

getSort（）

和

getSortedAt（）

。虽然

getSortedAt（）

没有出现在中，但如果我们直接检查，可以看到它

从'@angular/core'导入{Component，OnDestroy}；
从“ag网格角度”导入{IHeaderAngularComp}；
从“ag网格社区”导入{AgGridEvent，Column，IHeaderParams}；
从“rxjs”导入{Subject，fromEvent}；
从“rxjs/operators”导入{takeUntil，tap}；
@组成部分({
选择器：“我的datagrid头单元格”，
templateUrl:'./datagrid头单元格.component.html'，
styleUrls:['./datagrid头单元格.component.scss']
})
导出类DatagridHeaderCellComponent实现IHeaderAngularComp、OnDestroy{
受保护的已销毁$=新主题（）；
ngOnDestroy（）：void{
this.destromed$.next（）；
}
公共参数：IHeaderParams；
公共排序编号=0；
public showSortNumber=false；
agInit（参数：IHeaderParams）：无效{
this.params=params；
fromEvent（this.params.api，'sortChanged'）.pipe(
takeUntil（这个.被毁的$），
点击（（e:AgGridEvent）=>this.setMultiSortOrder（e））
).subscribe（）；
}
私有setMultiSortOrder（e:AgGridEvent）{
如果（！e | |！e.columnApi）返回；
让sortedColumns=（e.columnApi.getAllDisplayedColumns（）| |[]）
.filter（（列：Column）=>col.getSort（））
.sort（（a，b）=>a.getSortedAt（）-b.getSortedAt（））；
this.sortNumber=sortedColumns.findIndex（col=>col==this.params.column）+1；
this.showSortNumber=this.sortNumber>0&&sortedColumns.length>1；
}
}

最后，我们可以通过以下方式从标记调用sortNumber显示：

{{sortNumber}

Ag网格文件参考：

---

嗨，帕里托斯谢谢你的帮助。我已经解决了这个问题，并用一个例子创建了plunker。我得到了一个Typescript错误：属性“sortController”是私有的，只能在类“GridApi”@HDog use

（this.params.api与其他类一样）中访问。sortController.getColumnsWithSortingOrdered（）

@Paritosh请查看哪个使用公共api和类型检查。