angular - 如何在 Angular 4 的 ag-grid 中选择无限行模型上的行？

Question

我使用自定义 headerComponent 在标题单元格中显示一个复选框，作为具有无限滚动行模型的 ag-grid 中的全选选项。单击复选框后，我需要能够选择/取消选择当前行 block 中表中的所有行。同样在滚动到表的末尾时，将调用服务器以获取下一组行。加载的新数据也应该默认选中。

我知道 ag-grid 在无限行模型中不支持 select all 的标题选择。我如何以编程方式执行此操作？我怎样才能获得所有选定的行。

这是我当前的代码:

标题组件:

import { Component, OnInit,ViewChild, ElementRef } from '@angular/core';
import {IHeaderParams} from "ag-grid/main";
import {IHeaderAngularComp} from "ag-grid-angular";

@Component({
  selector: 'app-customheader',
  templateUrl: './customheader.component.html',
  styleUrls: ['./customheader.component.css']
})
export class CustomheaderComponent implements IHeaderAngularComp{
  private params : any;

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

  toggleSelectAll(){

  }

  constructor() { }
}

页眉组件模板:

<div>
  <div *ngIf="params.displayName == ''" ><input type="checkbox" class="selectAllCheckBox" (click)="toggleSelectAll()"> </div>
  <div>{{params.displayName}}</div>
</div>

表格组件:

constructor(public appServices:AppServices) {
    this.rowData = this.assayDataList;
    this.columnDefs = [
      {
        //headerCheckboxSelection: true,
        //headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        width: 40,
        headerComponentParams: CustomheaderComponent
      },
      {
        headerName: "Date/Time",
        field: "createdDate",
        width: 230
      },
      {headerName: 'Assay Name', field: 'assayName', width: 240},
      {headerName: 'Samples', field: 'sampleCount', width: 100}

    ];

    this.gridOptions = {
      rowSelection: 'multiple',
      cacheBlockSize: 30,
      //maxBlocksInCache: 2,
      enableServerSideFilter: false,
      enableServerSideSorting: false,
      rowModelType: 'infinite',
      paginationAutoPageSize: true,
      suppressRowClickSelection: true
      //suppressCellSelection: true
    };

    this.frameworkComponents = { agColumnHeader: CustomheaderComponent };

  }

Answer 1

同样有这个问题，每个行节点都有一个回调函数 forEachNode((node, index))，您可以在全选事件中循环设置每个选择。

 gridApi.forEachNode((row, index) => {
            gridApi.getRowNode(row.id).selectThisNode(true);
        });