分离的 DOM 树内存泄漏角度

Question

我的应用程序中存在内存泄漏问题，希望你们能提供帮助。经过检查问题，我得出的结论是它是由以下代码引起的：

我有几个 html 文件，ngFor用于为数组中的每个对象创建一些 html 代码：

<div class="patient-box level-1" *ngFor="let bed of beds">
  more html..
</div>

在组件中，我订阅了一个 observable，它不时发出一个新数组：

updateBeds(purge: boolean) {
  this._beds.next(this.bedsData);
} 

这是当我收到新数组时发生的情况：

this.patientService.beds.subscribe(updatedBeds => {
  this.beds = updatedBeds;
  this.sortBeds(this.sortProperty);
});

我认为这里发生的事情是，当我为beds数组分配一个新引用时，ngFor删除了中的所有 html 代码，然后将为来自 observable 的更新数组中的对象创建新的 html 代码。

问题是更新到达时被删除的 html 代码似乎没有被垃圾收集。在一段时间内拍摄了多个堆快照后，我看到越来越多的分离 DOM 树，其中一些不断增加其保留大小。我在快照中没有看到任何以黄色突出显示的节点，但我有很多红色节点。

我不知道这是否与它有关，但我特别注意到以下代码中的很多红色HTMLInputElement和HTMLImageElement节点ngFor：

<p>
  <img draggable="false" [matTooltip]="translations?.Tooltip.O2" (click)="toggleO2(bed)" [src]="bed.additional_O2 ? medO2 : noO2">
</p>
<input class="jump-button" [matTooltip]="translations?.Tooltip.Jump2" type="image" src="../../assets/images/Jump_1-2.png" (click)="moveBed(bed, 2)">

我真的不知道此时该怎么办。任何帮助深表感谢。谢谢！