Как прослушать sortChange (событие) на Angular для ag-Grid?

Question

У меня есть очень базовый c пример здесь: https://stackblitz.com/edit/angular-ag-grid-angular-cwvpic?file=app / my-grid-application / my-grid-application.component.ts

В этом ag-grid I Я хочу напечатать, в каком столбце щелкнуть и упорядочить каким способом. Для этого в основном я нашел метод 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 (имеет объявление).

Попробуйте:

  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). Я получаю то, что вы хотите, чтобы войти в консоль таким образом