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

Question

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

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

在 Angular 8 中

Answer 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,
}