Angular ag-grid 无法使用异步管道添加新行

Question

我的应用程序在不同模块中有两个类似的 ag-grid table。当我从 Behavior Subject 获取带有异步管道的 rowData 并在将新对象添加到该主题时相应地更新行时，一个工作正常。当新对象被推入主题时，另一个虽然不会更新它的行。这是 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>

我也在下面的 div 中跟踪主题，以查看添加新对象时的变化：

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

组件是这样设置的：

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

所以，正如我所说，我已经对另一个 table 使用相同的设置来更新它的行并且它正在工作，但在不同的模块中它不是。无论我对流做什么 - 订阅它并将其添加为数组或像示例中那样使用异步管道提供它，它都不会用新行更新 table 的视图。我需要更改路线或重新加载页面，然后才能看到新行。尽管如果我清空主题 table 会立即丢失所有行，所以它会以某种方式更新？！我知道在 ag-grid 的 api 中还有其他渲染方法，但是这个方法在另一个 table 中对我来说已经很好用了。可能是什么问题？

Answer 1

尝试以这种方式将新元素推入您的 rowData。

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

我想当你 push 数组中的新元素时，它不会更新数组的引用。但是，当您如上所述添加新元素时，它会更新数组引用，因此使 async 管道更新视图。

Angular ag-grid 无法使用异步管道添加新行

Angular ag-grid can not add new rows with async pipe

ag-grid

angular