以角度将行附加到现有数据列表

Posted 2023-03-13

【中文标题】以角度将行附加到现有数据列表

【英文标题】：appending rows to an existing data list in angular

【发布时间】：2018-03-27 17:05:24

【问题描述】：

我正在显示来自后端系统的数据。数据来自一个在一段时间内接收新行的表。我有一种机制可以在角度计时器中获取这些行。我的问题是，给定下面的模板，我如何在不重绘整个列表的情况下将这些新行添加到我的列表中，如下所示。

template: `
  <h1>title</h1>
  <h2>My favorite hero is: myHero</h2>
  <p>Heroes:</p>
  <ul>
    <li *ngFor="let hero of heroes">
       hero 
    </li>
  </ul>

`

【参考方案1】：

你看过 rxjs 的 observables 了吗？

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

他们可以提供一个变量，用提供的新值自动更新

【讨论】：

我为此使用了一个计时器。我更多地考虑 UI 部分。当我的计时器滴答作响时，我将调用服务并获取新行。我想在不重绘整个列表的情况下将新行附加到我的数据列表中。不确定 observable 对这里有多大帮助

如Shubham Agrawal 所说，其实你无事可做，我只是试了一下，你的代码运行良好

【参考方案2】：

由于您使用的是 Angular 2+ 版本，因此您不必担心重绘列表部分，因为它会使用影子 DOM 自动处理它。

【讨论】：

太好了，这就是我正在寻找的答案。我会试试看。谢谢