在 <div> angular6 中动态追加数据答案

【问题标题】：Dynamically append data inside <div> angular6在 <div> angular6 中动态追加数据
【发布时间】：2018-12-08 06:55:16
【问题描述】：

我有一个模板： <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()，但无论如何这可以用 Angular 完成吗？

谢谢，

【问题讨论】：

【解决方案1】：

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

【讨论】：

<div> 有动态数据是未知的，直到我得到数据，即我不知道我是否有 <div id='dynamicdata1'> 。所以我必须使用 innerHtml 并在每次有新数据到达时重新渲染整个 <div class='somedata'> 我想避免

【解决方案2】：

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

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


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

如果您的函数返回的值没有改变，那么项目在更新时不会从您的视图中移动。因此，通过向您的数组提供新项目，并仅返回它们的 ID，您会将项目附加到 arrat，而不会移动其他项目。

【讨论】：