如何通过单击外部按钮在 aggrid 中动态更改样式?
How to change the styles Dynamically in aggrid with an external button click?
cellClassRules: {'makeRed':'!this.flag'}
我想要这个基于按钮点击的标志变量,然后它应该在网格中进行更改
在Angular8
单击按钮后,您可以将组件中的变量 class 设置为 true。像 :
xyz.component.html
<button (click) = "onButtonClick()"> My button </button>
xyz.component.ts
public buttonClicked = false;
onButtonClick()
{
this.buttonClicked = true;
}
然后在您的 defs 列中,您可以执行以下操作:
cellClassRules: {'makeRed':this.buttonClicked}
其中 makeRed 是定义自定义属性的 CSS class。
注意:如果您希望为按钮切换行为执行此操作,那么您需要执行如下操作:
onButtonClick()
{
this.buttonClicked = this.buttonClicked ? !this.buttonClicked : this.buttonClicked
}
cellClassRules: {
'makeRed':this.buttonClicked,
'makeGreen': !this.buttonClicked,
}
cellClassRules: {'makeRed':'!this.flag'}
我想要这个基于按钮点击的标志变量,然后它应该在网格中进行更改
在Angular8
单击按钮后,您可以将组件中的变量 class 设置为 true。像 :
xyz.component.html
<button (click) = "onButtonClick()"> My button </button>
xyz.component.ts
public buttonClicked = false;
onButtonClick()
{
this.buttonClicked = true;
}
然后在您的 defs 列中,您可以执行以下操作:
cellClassRules: {'makeRed':this.buttonClicked}
其中 makeRed 是定义自定义属性的 CSS class。
注意:如果您希望为按钮切换行为执行此操作,那么您需要执行如下操作:
onButtonClick()
{
this.buttonClicked = this.buttonClicked ? !this.buttonClicked : this.buttonClicked
}
cellClassRules: {
'makeRed':this.buttonClicked,
'makeGreen': !this.buttonClicked,
}