I have two similar ag-grid tables in my app in different modules. One is working fine when I get the rowData with async pipe from Behavior Subject and updates the rows accordingly whenever a new object is added to the subject. The other though does not update it rows when new objects are pushed into the subject. This is the HTML:

<ag-grid-angular [gridOptions]="gridOptions" style="width: 100%;"  [rowData]="rowData | async"
[columnDefs]="columnDefs" autoSizeColumn (cellClicked)="onCellClicked($event)"
[frameworkComponents]="frameworkComponents" (cellValueChanged)="onCellValueChanged($event)"
[enableCellChangeFlash]="true" (gridReady)="onGridReady($event)">
</ag-grid-angular>

I am also tracking the subject in a div below to see the changes when new objects are added:

<div *ngFor="let test of (rowData | async)">
<p>{{test.description}}</p>
</div>

This is how the component is set:

  ngOnInit() {
this.requestsService.fetchRequests().subscribe((r) => {
  this.rowData = this.requestsService.requests$;
});

So, as I said I already use the same setup for another table to update its rows and it is working, but here in a different module it is not. No matter what I do with the stream - subscribe to it and add it as an array or provide it like in the example with async pipe, it is not updating the view of the table with the new row. I need to change routes or reload the page and then I can see the new row. Although if I empty the subject the table looses all it rows immediately, so it is updating somehow?! I understand that there are other render methods in the api of ag-grid, but this one is already working fine for me in the other table. What could be the problem?

CodePudding user response：

Try pushing the new element into your rowData this way.

this.rowData = [...this.rowData, newRecord];

I guess when you push new element in the array, it doesn't update the reference of the array. However, when you add new element as above, it updates the array reference and hence makes async pipe to update the view.