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; 
} 

問題ここに（または多分正常な動作は）私が見ていることですそのページのように見えても、コンソールにダミーオブジェクトが繰り返し記録されていることがレンダリングされていることがわかります。

これは変更を確認し続けるためですか？ createRange()メソッドを何度も繰り返し呼び出さないように、HTMLのページ数を表示する方が効率的な方法はありますか？

Answer 1

結合のために、あなたはむしろvariableを使用functionを使用しないでください。 functionを使用すると、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; 
}