在Angular7中使用复选框ag网格时出现复选框问题

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

第一个ag网格工作正常，但第二个网格未在选择时捕获阵列。数据处理得很好。当我们为带有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));
}

}

-html
伊辛宇宙

映射ISIN

导出类SecurityportfolioComponent实现OnInit{
@BlockUI（“块段”）BlockUI:NgBlockUI；
@ViewChild（'agGrid'）agGrid:AgGridAngular；
私有网格API；
私有网格API；
私家车；
columnDefs=[
{
可排序：是的，
过滤器：对，
宽度：30，
HeaderCheckBox选择：正确，
HeaderCheckBoxSelectionFilterOnly:真，
复选框选择：true，
锁定位置：正确
},
{
头名：“伊辛”，
字段：“isin”，
可排序：是的，
过滤器：对，
宽度：150
},
{
headerName:'安全名称'，
字段：“securityName”，
宽度：120，
锁定位置：正确
},
{
标题名称：“到期日”，
字段：“到期日”，
宽度：120，
锁定位置：正确
},
{
headerName:“评级”，
字段：“评级”，
宽度：150，
锁定位置：正确
}
];
columnDef=[
{
可排序：是的，
过滤器：对，
宽度：30，
HeaderCheckBox选择：正确，
HeaderCheckBoxSelectionFilterOnly:真，
复选框选择：true，
锁定位置：正确
},
{
头名：“伊辛”，
字段：“isin”，
可排序：是的，
过滤器：对，
宽度：150
},
{
headerName:'安全名称'，
字段：“securityName”，
宽度：150，
锁定位置：正确
},
{
标题名称：“到期日”，
字段：“到期日”，
宽度：120，
锁定位置：正确
},
{
headerName:“评级”，
字段：“评级”，
宽度：120，
锁定位置：正确
}
];
//行选择
行选择（事件）{
this.tempArr=this.agGrid.api.getSelectedRows（）；
console.log（this.tempArr）；
//console.log（this.tempArr）；
console.log（this.tableData）；
}
onRowSelect（事件）{
//控制台日志（e）；
this.selectedArr=this.agGrid.api.getSelectedRows（）；
console.log（this.selectedArr）；
//log（JSON.stringify（this.selectedArr，null，2））；
}
}

您需要另一个：

@ViewChild('agGrid2') agGrid2: AgGridAngular;

并在

onRowSelect

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