英文:
Hide aggrid columns conditionally based on route/query params
问题
我正在使用ag-grid版本27.3.0，我已经通过将其绑定到HTML [Coldefs] = 'Coldefs' 来定义了colDefs，并且我已经在ts文件中的数组中定义了Coldefs。
现在我根据我在ngOnInit()中存储的查询参数的值隐藏列。但问题是，由于我在HTML中绑定了colDefs，所以colDefs会首先执行，然后我会在变量中获取查询参数。
我如何在colDefs中访问查询参数，以便根据查询参数值隐藏和显示变量？
注意：我可以动态生成colDefs数组，但在我的Angular应用程序中有2K+个网格，如果您帮助我解决这个问题，将会非常有帮助。谢谢。
英文:
I'm using ag-grid version 27.3.0, I have defined colDefs by binding It to HTML [Coldefs]='Coldefs' and I have defined Coldefs in an array in ts file.
> binding coldefs in HTML and defining array in .ts file
Now I'm hiding the columns based on the value of the query params I have stored in ngOnInit(). Still, the issue is since I'm binding the colDefs in HTML colDefs are getting executed first, and then I get query params in a variable.
> storing query parms on ngOnInit(), Route: /credit-debit-memo-history?custId=&repId=0&CF=&fdt=0001-01-01&tdt=0001-01-01&type=credit&relCust=
How can I access the query params in the colDefs so that I can hide and show the variables based on the query param value?
> Not getting values because after colDefs ngOninit will set queryParams
Note: I can generate colDefs array dynamically but I have over 2K+ grids in my angular application, it will be a great help if you help me to solve this issue. Thanks.
答案1
得分: 1
我觉得你有两个选择：
1）加载网格，然后在建立查询参数后更新网格
2）等待在拥有查询参数之后再初始化网格
我认为最简单的方法是等到你有了查询参数之后再初始化这些colDefs。
不要在类级别定义和设置它，只需将它保留为public columnDefs: ColDef[] | GroupColDef;（我记得如果你只尝试使用ColDef[]，它会抱怨，因为它接受两种类型，另一种类型类似于那个...）。
然后在检索查询参数时添加初始化并复制/粘贴到其中：
...
this.CF = queryParams.CF;
this.initColDefs(this.queryParams);
this.preLoadData(this.queryParams);
});
}
private initColDefs(queryParams: Params): void {
this.columnDefs = [
{ ... },
...
];
}
最后一部分的关键是在你有这些列定义之后才加载网格：
<ng-container *ngIf="columnDefs">
<ag-grid-angular ...>
</ag-grid-angular>
</ng-container>
英文:
I figure you have two choices:
- Load the grid and then update the grid once you have established query params
- Wait to initialise the grid until you have them
I think the simplest way would be to wait to initialise those colDefs until you have the query params.
Instead of defining and setting at the class level, just leave it as public columnDefs: ColDef[] | GroupColDef; (I recall it'll complain at you if you try using only ColDef[] because it accepts two types, and the other type is something like that...).
Then in your query params retrieval you add in an init and copy/paste into there:
...
this.CF = queryParams.CF;
this.initColDefs(this.queryParams);
this.preLoadData(this.queryParams);
});
}
private initColDefs(queryParams: Params): void {
this.columnDefs = [
{ ... },
...
];
}
Last piece of the puzzle is to block grid from loading until you have those col defs in place:
<ng-container *ngIf="columnDefs">
<ag-grid-angular ...>
</ag-grid-angular>
</ng-container>
答案2
得分: 1
你可以在onGridReady中编辑所需列的hide属性，然后使用api.setColumnDefs(columns)。
setColumnDefs: 网格将重新绘制所有列标题，然后重新绘制所有行。
onGridReady(params: any) {
const col = this.columnDefs.find(x => x.headerName === 'Type');
col.hide = this.queryParams.type === 'debit';
params.api.setColumnDefs(this.columnDefs);
}
英文:
You can edit the hide property of the desired column in onGridReady and then use api.setColumnDefs(columns).
> setColumnDefs: The grid will redraw all the column headers, and then redraw all of the rows.
onGridReady(params: any) {
const col = this.columnDefs.find(x=>x.headerName === 'Type')
col.hide = this.queryParams.type === 'debit'
params.api.setColumnDefs(this.columnDefs).
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论