我这里有一个非常基本的例子: 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() {
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
)。我得到了你想要通过这种方式登录到控制台的内容。
关于javascript - 如何在 Angular 上监听 ag-Grid 的 sortChange(event)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60381989/