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';

  }
}

如果将log语句放在颜色块中，我可以看到它在应该为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'};
   }

}

使用Ag Grid

1 个答案: