在 Angular7 中使用 Checkbox ag-grids 时出现复选框问题

Question

尝试在单个组件中实现两个 ag-grid。两者都使用了不同的 columnDef，但其中一个网格的复选框不起作用。

第一个 ag-grid 工作正常，但第二个没有在选择时捕获数组。数据渲染得很好。当我们使用 columnDef 为网格选择复选框时会出现问题

- html
      <div class="row">
        <!-- isin universe -->
        <div class="col-md-6">
          <label>ISIN Universe</label><br>
          <div class="table-responsive">

            <ag-grid-angular #agGrid style="width: 100%; height: 550px" id="myGrid" class="ag-theme-balham"
            [rowData]="searchResultData" [columnDefs]="columnDefs"
            rowSelection="multiple" (rowSelected)="rowSelect($event)" (gridReady)="onGridReadyISIN($event)">
          </ag-grid-angular>
          </div>
        </div>
        <!-- mapped isin -->
        <div class="col-md-6">
            <label>Mapped ISIN</label><br>
            <div class="table-responsive">

            <ag-grid-angular #agGrid2 style="width: 100%; height: 550px" id="myGrid2" class="ag-theme-balham"
            [rowData]="tableDataMap" [columnDefs]="columnDef"
            rowSelection="multiple" (rowSelected)="onRowSelect($event)" (gridReady)="onGridReadyMap($event)">
         </div>
        </div>
      </div>


export class SecurityportfolioComponent implements OnInit {
@BlockUI('block-section') blockUI: NgBlockUI;
@ViewChild('agGrid') agGrid: AgGridAngular;
private gridApi;
private gridColumnApi;
private onGridReady;
columnDefs = [
    {
        sortable: true,
        filter: true,
        width: 30,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        lockPosition: true
    },
    {
        headerName: 'ISIN',
        field: 'isin',
        sortable: true,
        filter: true,
        width: 150
    },
    {
        headerName: 'Security Name',
        field: 'securityName',
        width: 120,
        lockPosition: true
    },
    {
        headerName: 'Maturity Date',
        field: 'maturityDate',
        width: 120,
        lockPosition: true
    },
    {
        headerName: 'Rating',
        field: 'rating',
        width: 150,
        lockPosition: true
    }
];
columnDef = [
    {
        sortable: true,
        filter: true,
        width: 30,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        lockPosition: true
    },
    {
        headerName: 'ISIN',
        field: 'isin',
        sortable: true,
        filter: true,
        width: 150
    },
    {
        headerName: 'Security Name',
        field: 'securityName',
        width: 150,
        lockPosition: true
    },
    {
        headerName: 'Maturity Date',
        field: 'maturityDate',
        width: 120,
        lockPosition: true
    },
    {
        headerName: 'Rating',
        field: 'rating',
        width: 120,
        lockPosition: true
    }
];
// row selection
rowSelect(event) {
    this.tempArr = this.agGrid.api.getSelectedRows();
    console.log(this.tempArr);
    // console.log(this.tempArr);
    console.log(this.tableData);
}
onRowSelect(event) {
    // console.log(e);
    this.selectedArr = this.agGrid.api.getSelectedRows();
    console.log(this.selectedArr);
    // console.log(JSON.stringify(this.selectedArr, null, 2));
}

}

Answer 1

你需要另一个：

@ViewChild('agGrid2') agGrid2: AgGridAngular;

并在onRowSelect中使用agGrid2

onRowSelect(event) {
    // console.log(e);
    this.selectedArr = this.agGrid2.api.getSelectedRows();
    console.log(this.selectedArr);
    // console.log(JSON.stringify(this.selectedArr, null, 2));
}