'Angular ag-grid can not add new rows with async pipe
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%;" class="ag-theme-alpine" [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?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
