Angular 从另一个组件刷新 ag-grid

Question

我在使用组件 ag-grid 刷新单元格时遇到问题，即使有文档也是如此。我有一个显示 ag-grid 的组件，第一列显示按钮以对不同的行进行操作。

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

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

其实点击方法是下面一种：

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

在父组件

<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/

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

Angular 从另一个组件刷新 ag-grid

Angular ag-grid refresh from another component

angular

refresh

ag-grid-angular