Динамически добавлять данные внутри <div>angular6

Question

У меня есть шаблон: <div class='somedata'></div> Я хочу динамически добавлять список <div> один за другим. Данные, которые я получаю, используя общий сервис через Subject.

Например:

<div class='somedata'>
<div id='dynamicdata1'>some data</div>
<div id='dynamicdata2'>some data</div>
..
..
..
</div>

dynamicdata1, dynamicdata2 и т. Д. Приходят один за другим с некоторой задержкой.

Изначально я думал об использовании ngFor для рендеринга div, но каждый раз, когда я помещаю данные в связанную переменную ngFor, цикл запускается снова из-за углового changeDetection.

Есть ли способ решить эту проблему без использования *ngFor?

Я знаю, что есть способ использовать jQuery, где мы можем использовать $(selector).append(), но есть ли это в любом случае в угловых?

Спасибо,

Answer 1

После моего комментария приведен пример пользовательской функции trackBy:

<div *ngFor="let x of y; trackBy: customTB"></div>


customTB(index, item) {
  return item.id;
}

Если значение, возвращаемое вашей функцией, не изменится, то элементы не будут перемещаться из вашего поля зрения, когда оно обновляется. Таким образом, предоставляя новые элементы в ваш массив и возвращая только их ID, вы добавляете элементы в arrat, не перемещая остальные.

Answer 2

Вы можете использовать innerHTML для добавления некоторых данных в элемент HTML в соответствии с вашими требованиями.