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

【问题标题】：Multiple ag-grids - setSelected to true is only working for the last grid多个 ag-grids - setSelected 为 true 仅适用于最后一个网格
【发布时间】：2021-08-27 06:14:32
【问题描述】：

我在数组上有一个 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?

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

【问题讨论】：

标签： angular typescript ag-grid ag-grid-angular angular11

【解决方案1】：

您在 onGridReady 方法中覆盖了网格 API。两个“结果”都将具有最后一个的 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 项目。

【讨论】：