У меня проблема с утечкой памяти в моем приложении, и я надеялся, что вы, ребята, сможете помочь. Изучив проблему, я пришел к выводу, что она вызвана следующим кодом:
У меня есть пара html-файлов, где я использую ngFor
, чтобы создать html-код для каждого объекта в массиве:
<div class="patient-box level-1" *ngFor="let bed of beds">
more html..
</div>
В компоненте я подписался на наблюдаемую, которая время от времени генерирует новый массив:
updateBeds(purge: boolean) {
this._beds.next(this.bedsData);
}
Вот что происходит, когда я получаю новый массив:
this.patientService.beds.subscribe(updatedBeds => {
this.beds = updatedBeds;
this.sortBeds(this.sortProperty);
});
Я думаю, что здесь происходит, когда я присваиваю новую ссылку массиву beds
, весь HTML-код в ngFor
удаляется, а затем создается новый 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)">
Я действительно не знаю, что делать в этот момент. Буду признателен за любую оказанную помощь. Спасибо!