如何在 Angular 上为 ag-Grid 监听 sortChange(event)? [英] How to listen sortChange(event) on Angular for ag-Grid?
问题描述
我这里有一个非常基本的例子: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){控制台日志(事件);}<div style="width: 200px;"><ag-grid-angular(sortChange)="sortChange($event)"#agGrid style="宽度:100%;高度:200px;"class="ag-theme-fresh" [gridOptions]="gridOptions"></ag-grid-angular>
不幸的是,这不起作用.它什么也不打印.你知道我如何用列名监听每一列的排序变化吗?
它是 sortChanged
而不是 sortChange
(有一个 d).
试试:
printSortStateToConsole() {const sortState = this.gridApi.getSortModel();如果(sortState.length == 0){console.log(没有排序活动");} 别的 {console.log("排序状态为:");for (var i = 0; i < sortState.length; i++) {const item = sortState[i];console.log(i + " = {colId: " + item.colId + ", sort: " + item.sort + "}");}}}onGridReady(参数:任何){this.gridApi = params.api;}
<ag-grid-angular#agGrid 样式=宽度:100%;高度:200px;"class="ag-theme-fresh";(sortChanged)="printSortStateToConsole($event)";(gridReady)="onGridReady($event)";[gridOptions]=gridOptions"></ag-grid-angular>
您的代码很好,但是您必须在网格准备就绪时填充 this.gridApi
(结帐 (gridReady)
和 onGridReady
).我知道你想通过这种方式登录到控制台.
I have very basic example here: https://stackblitz.com/edit/angular-ag-grid-angular-cwvpic?file=app/my-grid-application/my-grid-application.component.ts
In this ag-grid
I want to print which column clicked and ordered in what way.To do that basically I found method sortChange(event)
on official docs.But I couldn't find a way to implement this method.Here what I tried.
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>
Unfortunately this didn't work.It prints nothing.Do you know how I can listen sort changes on each column with column name?
It is sortChanged
and not sortChange
(has a d).
Try:
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>
Edit:
Your code is good, but you have to populate this.gridApi
when the grid is ready like that (checkout (gridReady)
and onGridReady
). I get what you want to be logged into the console this way.
这篇关于如何在 Angular 上为 ag-Grid 监听 sortChange(event)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!