使用 Ag Grid 动态改变单元格颜色

Question

我们正在尝试动态更改 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';

  }
}

如果我将日志语句放在颜色块中，我可以看到它在应该是blue 的地方变成蓝色，在应该是red 的地方变成红色。但是，它只为绿色注销一次，但该列中的所有行现在都是green！如果我删除 green 的返回所有行都是白色背景 - 没有颜色。 在 cellStyle 更改后，我尝试了这个以防它需要刷新：

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

但是它返回了以下错误：

Error: ag-grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout

我尝试了它建议的超时，但这似乎不起作用。

我原以为返回颜色会起作用，就像 green... 但我猜不是。

有人有什么想法吗？

我创建了一个 Stackblitz 来尝试展示我正在尝试做的事情。我无法显示我的数据，所以我只是分叉了另一个项目……但它仍然显示了我正在尝试做的事情。在这种情况下，我希望 Colombia 出现在 blue 中 - 其他所有内容都是红色的。但是，它似乎为每一行循环遍历Colombia，但仍未将其设置为blue。

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

Answer 1

工作解决方案在问题的 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'};
   }

}