javascript - 如何在 Angular 上监听 ag-Grid 的 sortChange(event)？

Question

我这里有一个非常基本的例子: https://stackblitz.com/edit/angular-ag-grid-angular-cwvpic?file=app/my-grid-application/my-grid-application.component.ts

在这个ag-grid中，我想打印哪一列被点击并以什么方式排序。为了做到这一点，我基本上在官方文档上找到了方法sortChange(event)。但我找不到实现此方法的方法。这是我尝试过的。

 sortChange(event){
      console.log(event);
    }

<div style="width: 200px;">
    <ag-grid-angular
     (sortChange)="sortChange($event)" 
     #agGrid style="width: 100%; height: 200px;" 
    class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

不幸的是，这不起作用。它什么也不打印。你知道我如何用列名监听每列的排序更改吗？

Answer 1

它是 sortChanged 而不是 sortChange(有 d)。

尝试:

  printSortStateToConsole() {
    const sortState = this.gridApi.getSortModel();
    if (sortState.length == 0) {
      console.log("No sort active");
    } else {
      console.log("State of sorting is:");
      for (var i = 0; i < sortState.length; i++) {
        const item = sortState[i];
        console.log(i + " = {colId: " + item.colId + ", sort: " + item.sort + "}");
      }
    }
  }

onGridReady(params: any) {
      this.gridApi = params.api;
 }

<div style="width: 200px;">
    <ag-grid-angular
       #agGrid style="width: 100%; height: 200px;" 
       class="ag-theme-fresh"
       (sortChanged)="printSortStateToConsole($event)"
       (gridReady)="onGridReady($event)"
       [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

编辑:您的代码很好，但是当网格准备就绪时，您必须填充 this.gridApi (查看 (gridReady) 和 onGridReady)。我得到了你想要通过这种方式登录到控制台的内容。