在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的最佳實踐

回答

相關問題