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

我在这里有一个非常基本的例子：
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>

不幸的是，这没有用，它什么都不打印。您知道我如何监听具有列名的每一列的排序更改吗？

最佳答案

它是sortChanged而不是sortChange（具有d）。

尝试：

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

// Notice the d on the HTML as well.

========编辑======================
您的代码很好，但是当网格准备就绪时（结帐this.gridApi和(gridReady)），您必须填充onGridReady。这样我就可以登录到控制台了

关于javascript - 如何在Angular上监听AgGrid的sortChange(event)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60381989/