在<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绑定变量时，由于angular的{{1} }。

不使用changeDetection可以解决此问题吗？

我知道有一种使用jQuery的方法，我们可以使用*ngFor，但是无论如何，这可以用角度来完成吗？

谢谢，

Answer 1

在我的评论之后，这是一个自定义trackBy函数的示例：

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


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

如果函数返回的值未更改，则更新后这些项将不会从您的视图中移出。因此，通过将新项目分配给数组并仅返回其ID，您可以将项目追加到arrat，而不会移动其他项目。

Answer 2

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