如何通过单击外部按钮在 agggrid 中动态更改样式?

Posted

技术标签:

【中文标题】如何通过单击外部按钮在 agggrid 中动态更改样式?【英文标题】:How to change the styles Dynamically in aggrid with an external button click? 【发布时间】:2021-06-19 22:13:56 【问题描述】:

cellClassRules: 'makeRed':'!this.flag'

我想要这个基于按钮单击的标志变量,然后它应该在网格中进行更改

在 Angular 8 中

【问题讨论】:

【参考方案1】:

单击按钮后,您可以将组件类中的变量设置为 true。类似的东西:

xyz.component.html <button (click) = "onButtonClick()"> My button </button>

xyz.component.ts

public buttonClicked = false;

onButtonClick()

   this.buttonClicked = true;

然后在您的列定义中,您可以执行以下操作:

cellClassRules: 'makeRed':this.buttonClicked

其中 makeRed 是定义自定义属性的 CSS 类。

注意:如果您希望为按钮切换行为执行此操作,则需要执行以下操作:


onButtonClick()

   this.buttonClicked = this.buttonClicked ? !this.buttonClicked : this.buttonClicked



cellClassRules: 
'makeRed':this.buttonClicked,
'makeGreen': !this.buttonClicked,

【讨论】:

是的@AkshAy Agrawal,您的回答是正确的,我们必须在 click() 中添加网格刷新()方法。非常感谢

以上是关于如何通过单击外部按钮在 agggrid 中动态更改样式?的主要内容,如果未能解决你的问题,请参考以下文章

单击表格视图中的按钮时如何更改表格视图外部的标签文本

如何通过单击按钮更改 Google 地图中心

通过打字稿更改按钮单击时的svg颜色

UITableView:单击按钮时如何动态更改单元格高度?迅速

UITableView:单击按钮时如何动态更改单元格高度?

如何使用 css 和/或 javascript 动态更改样式