我在Angular 中使用多选复选框实现ag-grid
Grid-component.html

<ag-grid-angular
    [defaultColDef]="defaultColDef"
    style="height: 600px; width: 100%"
    class="ag-theme-density zebra"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [suppressRowClickSelection]="true"
    [groupSelectsChildren]="true"
    [pagination]="true"
    (rowSelected)="onRowSelected($event)"
    [rowSelection]="rowSelection"
    [paginationPageSize]="paginationPageSize"
    (gridReady)="onGridReady($event)"
    [paginationNumberFormatter]="paginationNumberFormatter"
    (firstDataRendered)="onFirstDataRendered($event)"
    [enableBrowserTooltips]="true"
    [context]="context"
    [animateRows]="true"
  >
  </ag-grid-angular>

Grid-component.ts

/**
   * on checkbox row select event
   */
  onRowSelected(event: RowSelectedEvent): void {
    this.rowCount = KrGridUtils.getSelectedLength(event);
    this.selectedData = KrGridUtils.getSelectedData(event);
  }

Icon-render-framework.ts

export class KrViewerGridIconComponent implements ICellRendererAngularComp {
  public cellValue!: string;
  isShowBadge: boolean = false;
  typeIcon: string = '';
  params!: ICellRendererParams;
  testName!: string;
  order!: number;
  color!: string;

  // gets called once before the renderer is used
  agInit(params: ICellRendererParams): void {
    this.params = params;
    if (params.colDef?.headerName === KR_TEMPLATE_HEADER.TYPE) {
      this.typeIcon = params.data.type;
      this.isShowBadge = !this.isShowBadge;
      this.cellValue = this.getValueToDisplay(params);
    }
    if (params.colDef?.headerName === KR_TEMPLATE_HEADER.NAME) {
      this.testName = params.data.name;
    }
  }

  // gets called whenever the user gets the cell to refresh
  refresh(params: ICellRendererParams): boolean {
    // set value into cell again
    this.cellValue = this.getValueToDisplay(params);
    return true;
  }

  getValueToDisplay(params: ICellRendererParams): string {
    return params.valueFormatted ? params.valueFormatted : params.value;
  }
}

Icon-render-framework.html

<button
  *ngIf="!isShowBadge && !testName"
  class="grid-settings"
  ds-button
  [ngStyle]="{ 'background-color': params.data.color }"
  (click)="openGridSettings($event)"
>
  <svg-icon data-testId="settings-icon" class="grid-settings" [key]="'settings'" [size]="'sm'"></svg-icon>
</button>
<div *ngIf="isShowBadge" class="type-header-value">
  <div><svg-icon data-testId="settings-icon" class="grid-settings" [key]="typeIcon" [size]="'md'"></svg-icon></div>
  <div>
    <span class="type-badge start-100 translate-middle badge rounded-pill bg-secondary">{{ 0 }}</span>
  </div>
</div>
// here to show Name row data and hard coded order badge
**<div *ngIf="testName" class="type-header-value">
  <div>
    {{ testName }} // Name colummn
    <span class="type-badge start-100 translate-middle badge rounded-pill bg-secondary">{{ params.data.order }}</span> // showing oder
  </div>
</div>**

我实现了cellRendererFramework来渲染图标和徽章（设置、类型、名称徽章）行数据，当前cellRendererFramework中的agint显示订单号（硬编码）作为名称行数据中的标记，但我想显示选定行的顺序，当我选择行/单击行复选框时，将订单号附加到名称的特定行，如图所示，或者如何在cellRendererFramework中获取行选择事件，
grid image
请你帮我一下