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 的 return 所有行都是白色背景 - 没有颜色。在 cellStyle 更改后我尝试了这个以防它需要刷新：

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

但它 return 出现了以下错误：

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

我尝试了它建议的超时，但似乎没有用。

我本以为 return 在我 return 可以工作的地方使用颜色，就像它对 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'};
   }

}

Ag Grid 电池颜色的动态变化

Dynamic change of cell color with Ag Grid

javascript

ag-grid