Angular2：ngFor在頁面呈現後繼續執行

Question

我正在創建一個可重用的表格組件。在嘗試在該組件上實現分頁時，我首先注意到，我無法在不創建虛擬數組的情況下執行簡單的「for」循環。

至於那種砍，我實現了以下內容：

HTML：

<ul class="pagination hidden-xs pull-right"> 
    <li *ngFor="let item of createRange(); let pageNum = index;"> 
     <a (click)="goToPage(pageNum+1)">{{pageNum+1}}</a> 
    </li> 
</ul> 

組件：

createRange() { 
    var items: number[] = []; 
    for (let i = 1; i <= this.totalPages; i++) { 
     items.push(i); 
    } 
    console.log(items); 
    return items; 
} 

這裏的問題（或者預期的行爲）是我看到的看到虛擬對象一遍又一遍地記錄到控制檯，即使看起來該頁面已完成渲染。

這是因爲它想要檢查更改嗎？有沒有更有效的方式讓我在HTML中顯示頁面數量，以便它不會一直調用createRange()方法？

Answer 1

對於綁定，則不應使用function而使用variable。如果您使用函數，則每當angular2運行綁定檢查時都會調用它。根本不推薦使用綁定功能。

<li *ngFor="let item of myArr; let pageNum = index;"> //<<<@@@ myArr 
     <a (click)="goToPage(pageNum+1)">{{pageNum+1}}</a> 
    </li> 

constructor(){ 
    this.myArr=this.createRange();      //<<<@@@ using myArr variable. 
} 

createRange() { 
    var items: number[] = []; 
    for (let i = 1; i <= this.totalPages; i++) { 
     items.push(i); 
    } 
    console.log(items); 
    return items; 
}