多个 ag-grids - setSelected 为 true 仅适用于最后一个网格

Question

我在数组上有一个 for 循环并根据数组的内容创建 ag-grid。根据数据，我预选了 ag-gird 行，

gridReady 方法

  onGridReady(event) {
    this.resultsArray.forEach(result => {
      result.gridOption.api = event.api;
      result.gridOption.columnApi = event.columnApi;  
    });
      event.api.forEachNode((node) => {
      if (node.data?.selected) {
        node.setSelected(true);
      }
    });
  }

resultsArray 包含每个网格的数据和网格选项。假设用户从两个网格中取消选择某些行，然后单击重置。它应该重置两个网格，但它只重置最后一个网格

重置方法

  onReset(){
      this.resultsArray.forEach(result => {     
      result.gridOption.api.forEachNode((node) => {
      if (node.data?.selected) {
        node.setSelected(true);
      }
    });
    });
  }

我的 stackblitz 演示 https://stackblitz.com/edit/angular-ag-grid-angular-mtpg6q?

关于如何重置每个网格的任何建议，而不仅仅是最后一个网格。

Answer 1

您正在覆盖 onGridReady 方法中的网格 API。两个 'results' 都会有最后一个的 API。

你要改：

为 gridReady 方法添加标识符 groupName 以了解您要设置哪个 API：

<!-- src/app/my-grid-application/my-grid-application.component.html -->
<div>
    <button (click)="onReset()">Reset</button>
</div>

<div *ngFor="let result of resultsArray; let resultIndex = index">
    <div>{{result.groupName}}</div>
    <ag-grid-angular #agGrid style="width: 80%; height: 80%;" class="ag-theme-fresh" [gridOptions]="result.gridOption"
        [defaultColDef]="defaultColDef" [columnDefs]="myColumnDefs" (gridReady)="onGridReady($event, result.groupName)"
        [rowSelection]="rowSelection" [rowData]="result.data" [rowMultiSelectWithClick]="true">
    </ag-grid-angular>
</div>

在 if 内添加检查：

onGridReady(event, groupName) {
    this.resultsArray.forEach(result => {
      if(result.groupName == groupName) {
        result.gridOption.api = event.api;
        result.gridOption.columnApi = event.columnApi;
        result.gridOption.api.sizeColumnsToFit(); 
      }
    });
      event.api.forEachNode((node) => {
      if (node.data?.selected) {
        node.setSelected(true);
      }
    });
  }

这是一个有效的 stackblitz 项目。

多个 ag-grids - setSelected 为 true 仅适用于最后一个网格

Multiple ag-grids - setSelected to true is only working for the last grid

angular

typescript

ag-grid

ag-grid-angular

angular11