在ag-grid中选中3个复选框后，如何禁用剩余的复选框（行）？

Question

我对ag-grid不熟悉，目前在我的angular 7项目中，我正在实施ag-grid。

我的每一行都有checkboxSelection true。我保留了“运动员”字段的“ checkboxselection：true”。 在用户选择3个复选框（3行）之后，我试图禁用所有其余的复选框（或行），但是我不知道该怎么做。

任何帮助将不胜感激。

我在下面共享了我的代码：

checkbox-selection.component.html

<button (click)="getSelectedRows()">Get Selected Rows</button>
<ag-grid-angular
      #agGrid
      style="width: 100%; height: 80vh;"
      id="myGrid"
      class="ag-theme-balham"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      [rowSelection]="rowSelection"
      [suppressRowClickSelection] = "true"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

checkbox-selection.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AgGridAngular } from 'ag-grid-angular';

@Component({
  selector: 'app-checkbox-selection',
  templateUrl: './checkbox-selection.component.html',
  styleUrls: ['./checkbox-selection.component.scss']
})
export class CheckboxSelectionComponent implements OnInit {
  gridApi;
  gridColumnApi;
  columnDefs;
  defaultColDef;
  rowSelection;
  rowData;

  @ViewChild('agGrid') agGrid: AgGridAngular;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: 'Athlete',
        field: 'athlete',
        width: 200,
        checkboxSelection: true
      },
      {
        headerName: 'Age',
        field: 'age',
        width: 90
      },
      {
        headerName: 'Sport',
        field: 'sport',
        width: 110
      }
    ];
    this.defaultColDef = {
      width: 200,
      sortable: true,
      resizable: true,
      filter: true
    };
    this.rowSelection = 'multiple';
  }
  ngOnInit() {}

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json'
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }

  getSelectedRows() {
    const selectedNodes = this.agGrid.api.getSelectedNodes();
    const selectedData = selectedNodes.map(node => node.data);
    const selectedDataStringPresentation = selectedData
      .map(
        node =>
          '(' +
          node.athlete +
          ', age: ' +
          node.age +
          ', sport: ' +
          node.sport +
          ')'
      )
      .join(', ');
    alert(`Selected nodes: ${selectedDataStringPresentation}`);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from './material/material.module';

import { AgGridModule } from 'ag-grid-angular';
import 'ag-grid-enterprise';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { CheckboxSelectionComponent } from './components/checkbox-selection/checkbox-selection.component';

@NgModule({
  declarations: [
    AppComponent,
    CheckboxSelectionComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FlexLayoutModule,
    HttpClientModule,
    MaterialModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

我可以使用复选框选择多行，但是我需要在用户选择3个复选框后立即禁用剩余的行。