関数が複数回呼び出される

Question

dataListを表示したい。いくつかの値は関数から計算されます。これは、angular2がcalculate関数を何度も呼び出すようです。

<tr *ngFor="let data of dataList"> 
    <td>{{ data.no }}</td> 
    <td>{{ data.name }}</td> 
    <td>{{ calculateFunction(data.price) }}</td> 
    </tr> 

コンソールは、 "calculate ..."というメッセージを何度も出力します。

calculateFunction() { 
    console.log('calculate...'); 
    return ...; 
} 

私はパフォーマンスに関して心配する必要がありますか、それともangular2にこれを行わせてください。

Answer 1

caculateFunction(data.price)関数は、（正確にはngForで作成された埋め込みビューの）コンポーネントの角度の変化検出を検出するたびに呼び出されます。これは、DOMの更新が変更検出の一部であり、AngularがcaculateFunctionを呼び出してDOM更新に使用する値を知る必要があるためです。そして、変化の検出サイクルはかなり頻繁に実行することができます。したがって、リストに3つのアイテムがあり、CDが最初に3回トリガーされた場合、その関数は9回呼び出されます。

あなたはupdateRenderer機能を調べる場合は、これらの線に沿って何かを参照してくださいshoul：

function(_ck,_v) { 
    var _co = _v.component; 
    var currVal_0 = _co.calculateFunction(_v.context.$implicit); 
    _ck(_v,3,0,currVal_0); 
    } 

はThe mechanics of DOM updates in Angularでどの角度アップデートのDOMについてお読みください。

私はパフォーマンスに関して心配する必要がありますか？あるいは、angular2には がありますか？

calculateFunction(data.price)同じ価格で同じ結果が返された場合は、各アイテムについてこれらの値を事前に計算し、それらをテンプレートにレンダリングする方がよいでしょう。

<td>{{ data.no }}</td> 
<td>{{ data.name }}</td> 
<td>{{ data.calculatePrice) }}</t 

こうすることで、パフォーマンスの低下を回避できます。