javascript - AG 网格中未设置多个复选框

Question

我的行上有复选框，并且我正在尝试选择多个复选框。当我点击一个时，它检查正常。如果我单击另一行上的复选框，则该复选框会选中，但我所在的复选框会被取消选中。

HTML:

<div>
  <ag-grid-angular
    #dataVisGrid
    style="width: 1000px; height: 500px;"
    class="ag-theme-balham"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [rowSelection]="multiple"
    [rowMultiSelectWithClick]="true"
    [enableRangeSelection]="true"
    (rowClicked)="onRowSelect($event)">

  </ag-grid-angular>
</div>

数据可见组件.js

columnDefs = [
  {headerName: 'Data Source', field: 'dataSource', sortable: true, filter: true, checkboxSelection: true},
  {headerName: 'Value', field: 'value', sortable: true, filter: true},
  {headerName: 'State', field" 'state', sortable: true, filter: true}
];

onRowSelect(event) {
  console.log("onRowSelect:"+JSON.stringify(event));
}

如果我按住 Ctrl 键单击该行，我可以看到多行突出显示(因为 enableRangeSelection)。但是，只有一个复选框有效。

根据文档，这似乎是您设置的方式 - 但由于某种原因它对我不起作用。大家有什么想法吗？

Answer 1

将行选择设置为变量并将变量设置为“多个”

[rowSelection]="rowSelection"

以及组件内部

this.rowSelection = "multiple";

或者您可以删除包裹在 rowselection 周围的 [ ]

rowSelection="multiple"

因为 multiple 是字符串而不是变量