Проблема с флажком, когда в Angular7 используются аг-сетки флажков

Пробуем реализовать две ag-сетки в одном компоненте. Использовали разные параметры columnDef для обоих, но флажок для одной из сеток не работает.

Первая аг-сетка работает правильно, но вторая не захватывает массив при выборе. Данные были обработаны нормально. Проблема возникает, когда мы устанавливаем флажок для сетки с помощью 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));
}

}

person radsin    schedule 12.12.2019    source источник


Ответы (1)


вам нужен другой:

@ViewChild('agGrid2') agGrid2: AgGridAngular;

и используйте agGrid2 в onRowSelect

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