javascript-使用Ag Grid动态更改单元格颜色

我们正在尝试动态更改Ag Grid中列的单元格颜色.这是代码.我没有包括从数据库中提取数据的代码,因为这很好.

HTML(定义网格)：

<ag-grid-angular
   #eventsGrid2
   style="width: 1200px; height:300px;"
   class="ag-theme-balham"
   [rowData]="myEventsGrid"
   [columnDefs]="eventsCols"
   (gridReady)="onGridReady($event)">
</ag-grid-angular>

JS：

export class DataVis {
  @ViewChild('eventsGrid2') eventsGridComponent2: agGridNg2;
  selectedRows = [];
  eventsCols = [
    {headerName: '', field: 'colorId', colId: 'colorId'},
    {headerName: 'Id', field: 'id'},
    {headerName: 'File Id', cellClass: this.setColor.bind(this), field: 'fileId'}
  ]

  setColor(params) {
    this.selectedRows = [];
    this.eventsGridComponent2.api.forEachNode(node => this.selectedRows.push(node.data));
    console.log("SelectedRows:"+JSON.stringify(this.selectedRows));
    //I can see that it printed out the rows that show up in the grid
    this.selectedRows.forEach(function(element) {
      if(element.fileId == "1") {
         //trying to set the cellStyle in case that would work
         element.cellStyle = 'blue';
         //returning color to calling function
         return 'blue';
      } else {
         return 'red';
      }
      return 'green';

  }
}

如果将log语句放在颜色块中,我可以看到它在应为蓝色的地方为蓝色,在应为红色的地方为红色.但是,它只注销一次为绿色,但是该列中的所有行现在都是绿色！如果我删除绿色的返回,所有行都是白色背景-没有颜色.
更改cellStyle之后,我尝试过此操作以防需要刷新：

element.cellStyle = 'blue';
this.eventsGridComponent2.api.redrawRows();

但它返回以下错误：

错误：ag-grid：当网格位于图形行的中间时,无法使网格绘制行.当网格处于渲染阶段时,您的代码可能称为网格API方法.为了解决这个问题,请将API调用设置为超时

我尝试了建议的超时时间,但是似乎没有用.

我本来以为在我返回颜色的地方返回颜色是可以的,就像绿色一样……但是我想不是.

有人有什么想法吗？

我创建了一个Stackblitz来尝试展示我的意图.我很想让我的数据显示出来,所以我只是分叉了另一个项目…但是它仍然显示了我正在尝试做的事情.在这种情况下,我希望哥伦比亚显示为蓝色-其他所有显示为红色.但是,它似乎遍历哥伦比亚每一行,但仍未将其设置为蓝色.

https://stackblitz.com/edit/ag-grid-template-renderer-example-3anbbx

解决方法:

可行的解决方案在问题中的Stackblitz中,但这是它的作用.我没有遍历网格中的行并尝试获取我认为的需求,而只是使用了来自网格本身的参数.

ColDefs：

 ngAfterViewInit(): void {
    this.gridOptions.api.setColumnDefs([
      {headerName: '', field: 'colorId', colId: 'colorId', checkboxSelection: true, cellStyle: this.cellStyling},

功能：

cellStyling(params:any){   
   if (params.data.country == 'Colombia') {
     return {'background-color': 'blue'};
    } else {
         return {'background-color': 'green'};
   }

}

标签：ag-grid,javascript
来源： https://codeday.me/bug/20191013/1910652.html