我使用Ag-grid和一个NgRx商店作为它的数据源。数据在我的父组件中处理，并通过observable ( tableData )传递给我的表组件。

<div class="table-wrapper" *ngIf=tableData>
 <ag-grid-angular
    class="ag-theme-balham"
    [columnDefs]="tableData.columnDefs"
    [rowData]="tableData.rowData" 
    [defaultColDef]="defaultColDef"
    [gridOptions]="gridOptions"
    (gridReady)="onGridReady($event)"
    (rowDataChanged)="onRowDataChanged($event)"
    (cellClicked)="cellClicked($)"
 </ag-grid-angular>
</div>

ag-grid列包含复选框。当用户单击一个单元格时，会发出一个事件，该事件会更改应用程序的当前状态、已单击的复选框和整个 tableData 。因此，UI按预期反映了这些更改。

​

​

 @Input tableData;
 @Output cellValueChanged = new EventEmitter<>();
 constructor() { }
 onGridReady(params: any) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
  setTimeout(() => {
   this.gridApi.sizeColumnsToFit();
   }, 1000);
 cellClicked(event) {