有時候一次性從后臺拿到大量數據后渲染到頁面上的時候比較卡蛔溃,而獲取數據的接口還是比較快的,這時候就需要前端懶加載了。
一般我們在組件中用*ngFor
遍歷數據渲染頁面秒梳,我們可以在html中這樣做:
<div nz-popconfirm *ngFor="let user of sharedUsersValues; let i = index; trackBy: userTrackBy">
<span class="user-label">{{ user.label }}</span>
</div>
在ts中這樣做:
userTrackBy(index: number, user: ShareUserOption) {
return user.value.userId;
}
在頁面中添加一個加載更多的按鈕法绵,每次點擊時就會加載更多的數據(往sharedUsersValues
push更多(定量)的數據),而trackBy
支持每次只渲染新增加的數據酪碘,而不會重新渲染全部的數據朋譬,這樣可以大大緩解頁面卡頓的現象。
當然解決方式還有很多兴垦,比如分頁等等徙赢。