Question

即使使用文档，我也面临着使用组件ag-grid刷新单元格的问题。我有一个显示ag-grid的组件，以及第一列显示按钮，用于对不同行进行操作。

{
        headerName: 'Actions', field: '', cellRendererFramework: ActionButtonsComponent, width: 140
      },
      {...

按钮使用cellRendererFramework呈现。当我单击“有效”按钮时，它很好地将数据库中的“ En Cours”值更改为“Terminé”，但我想同时刷新单元格。

实际上，click方法是以下一种：

terminerDeveloppement(devId: number) {
   this.developpementService.terminerDeveloppement(devId).subscribe(res => {
     //not working cause gridApi is a parent component attribut
     //this.gridApi.refreshCells();

   });
 }

我真的不知道该怎么解决。感谢您的帮助

Answer 1

我认为在ActionButtonsComponent中调用ParentComponent。
https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-angular-components

@Component({
  selector: 'avitve-button-cell',
  template: `
    <span
      ><button
        style="height: 20px"
        (click)="invokeParentMethod()"
      >
        Invoke Parent
      </button></span
    >
  `})
export class ActionButtonsComponent implements ICellRendererAngularComp {
  public params: any;

  agInit(params: any): void {
    this.params = params;
  }

  public invokeParentMethod() {
    // this.params.data has current row value not cell
    this.params.context.componentParent.methodFromParent(this.params.data);
  }

  refresh(): boolean {
    return false;
  }
}

在ParentComponent上

<ag-grid-angular
        [context]="context"
></ag-grid-angular>

  this.context = { compnentParent: this}
  methodFromParent(rowData) {
   // get devId from rowData
 
   this.developpementService.terminerDeveloppement(devId).subscribe(res => {
     this.gridApi.refreshCells();
   });
  }

如果无法更改，则尝试直接编辑rowData。 rowData（this.params.data）具有所有行值。
或使用this.gridApi.setRowData(res)

Answer 2

我通过在更新数据库后使用数据服务刷新单元格解决了该问题。本教程非常好：https://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

真正的问题是试图更新组件外部网格的数据，并且此解决方案运行良好。

从另一个组件刷新角度农业网格

2 个答案: