当自定义 Cell Renderer 组件内部发生更改时如何刷新 ag-grid？答案

【问题标题】：How to refresh an ag-grid when a change occurs inside a custom Cell Renderer component?当自定义 Cell Renderer 组件内部发生更改时如何刷新 ag-grid？
【发布时间】：2019-10-13 21:58:00
【问题描述】：

在我的网格中，我有这个专栏：

  {
      headerName: "Generic/Specific",
      field: "genericspecific",
      id: "6",
      cellRenderer:'genericSpecificCellRenderersComponent',
      cellStyle: params => {
        const colors: string[] = ["red", "orange"];
        const genericSpecific: string[] = ["Generic", "Specific"];
        return {
          "background-color": colors[genericSpecific.indexOf(this.selectedOptions[params.node.id])]
        };
      }
    }

如您所见，它有一个自定义的 Cell Renderer。这是它的定义：

 @Component({
  selector: "app-generic-specific-renderers",
  template: `
    <hr />
    <select class="form-control" id='0' (change)="updateChosenValue($event.target); refresh(params)">
      <option >{{ selectedOptions[params.node.id] }}</option>
      <option >Specific</option>
      <option >Generic</option>
    </select>
    <hr />
  `
})
export class GenericSpecificCellRenderersComponent implements OnInit {
  updateChosenValue(event) {
    if (event.value==='Specific'){
      this.selectedOptions[this.params.node.id]='Specific'
    }
    else if (event.value==='Generic'){
      this.selectedOptions[this.params.node.id]='Generic'
     }
    }
  selectedOptions:string[]=[];
  constructor(private controlAssessmentData: ControlAssessmentService) {
    this.controlAssessmentData.currentSelectedOptions.subscribe(
      receivedSelectedOptions =>
        (this.selectedOptions = receivedSelectedOptions)
    );
  }
  ngOnInit() {}
  public params: any;
  public gridApi:any;

  // called on init
  agInit(params: any): void {
    this.params = params;
    this.gridApi= params.api;
  }
  // called when the cell is refreshed
  refresh(params: any): boolean {
    this.params = params;
    this.gridApi.refreshCells()
    console.log('this.params: ', this.params);
    return true;
  }
}

我想在用户每次从下拉列表中选择一个选项时刷新网格。
我认为我的代码应该可以工作，因为我在刷新定义网格时使用了相同的逻辑。
但是，它没有。
知道为什么吗？也许我该如何解决？
谢谢！

【问题讨论】：

导致刷新的事件：调用 api.refreshCells() 通知网格数据已更改（请参阅刷新）。
刷新单元格：api.refreshCells(cellRefreshParams) - 获取网格以刷新所有单元格。更改检测将用于仅刷新显示单元格值与实际值不同步的单元格。如果使用带有刷新方法的 cellRenderer，则会调用刷新方法。
ag-grid.com/javascript-grid-cell-rendering-components; ag-grid.com/javascript-grid-refresh

标签： ag-grid ag-grid-angular

【解决方案1】：

当一个选项被改变时（不是你现在的refesh()），运行 api.refreshCells 并将选项 force 设置为 true。 api.refreshCells({ force: true });

如果可以，也可以在调用中添加所需的行/列以避免重绘整个网格。

【讨论】：

这解决了我使用 ag-grid 构建树形结构的相关问题，并且未刷新的列依赖于 autoGroupColumnDef.cellRendererParams.innerRenderer

【解决方案2】：

在组件渲染器上刷新'mycomponentRenderer'被调用例如：

 const rowNode = this.gridApi.getDisplayedRowAtIndex(1);
 rowNode.setDataValue('mycolumn', 'myvalue');
 this.gridApi.refreshCells({ columns: ['mycolumn'] });

和“mycolumn”必须在“field”属性中的列配置期间放入columnDefs。

html:

html: <ag-grid-angular
        [rowData]="items"
        [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef"
        (gridReady)="onGridReady($event)"
        [frameworkComponents]="frameworkComponents">
</ag-grid-angular>

ts：

 this.columnDef[0] = {
            field: 'mycolumn',
            headerName: 'mycolumnHeader',
            cellRenderer: 'mycomponentRenderer',
}

【讨论】：