在 <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 绑定变量时，由于 [=37，循环再次运行=] 的 changeDetection 。

有没有什么方法可以在不使用 *ngFor 的情况下解决这个问题？

我知道有一种使用 jQuery 的方法，我们可以在其中使用 $(selector).append()，但是无论如何这可以在 angular 中完成吗？

谢谢，

Answer 1

您可以根据需要使用 innerHTML 将一些数据附加到 HTML 元素中。

Answer 2

根据我的评论，这是自定义 trackBy 函数的示例：

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


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

如果您的函数返回的值没有改变，则项目在更新时不会从您的视图中移走。因此，通过将新项目添加到您的数组并仅返回它们的 ID，您可以将项目附加到 arrat，而无需移动其他项目。

Dynamically append data inside <div> angular6