在Angular 2中从动态数组生成HTML的最佳实践

我是Angular 2的新手。通常，我们使用* ngFor循环访问数组，并根据数组中的值显示HTML。例如，在Angular 2中从动态数组生成HTML的最佳实践

<ul *ngFor="let employee of employees"> 
    <li>{{employee.name}}</li> 
</ul>

这个效果很好。但是无论何时我们向该数组添加元素（即使是1个元素），它都会通过整个数组来显示HTML。对？

我想使用无限滚动插件（https://www.npmjs.com/package/angular2-infinite-scroll）它正在工作，每当滚动触发器，元素被添加到数组，并且这个整个数组从一开始就循环生成HTML。我不认为这是一个最好的做法，因为每当滚动触发它将通过整个数组来显示HTML。

理想情况下，来自特定滚动的元素应该附加到现有的HTML，而不是一次又一次地循环整个数组？

请帮我一些示例代码。

来源

2017-03-04 user2609021

角度很聪明，会做正确的事情。这就是“差异”的意义所在。如果有必要，你可以通过使用'trackBy'来帮助它。 – 2017-03-04 18:15:04

在这种情况下，你应该触发服务调用获取下一个数组元素，当用户滚动使用页面下方的结束，

window.onscroll = function(ev) { 
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
     //raise the service call to fetch next set of array elements 
    } 
};

注意：如果你需要一些演示，更新代码到您的文章，以便我可以重复使用

来源

2017-03-04 18:07:01 Aravind

我刚刚检查了插件自身的代码，请查看https://www.npmjs.com/package/angular2-infinite-scroll文件“app.ts”的演示...这里将值推送到数组和渲染整个阵列每次都是 – user2609021

@ user2609021其实你的期望是什么？ – Aravind

我的问题是，无论何时向数组添加元素，我们都必须通过循环整个数组来呈现HTML。这会造成性能问题吗？在Angular 2中应该有更好的方法... – user2609021

在Angular 2中从动态数组生成HTML的最佳实践

回答

相关问题