角度4は、* ngFor内の呼び出し関数でフリーズします

Question

私は角度アプリに奇妙な問題があります。

と、このテンプレート：このコンポーネントを考える

ページではChromeは、最終的にタブを殺すために私を促しまで永遠にロードしようとします。

代わりgetDataForMonth(month)の私は単にmonthDataという名前home.component.tsにデータオブジェクトを持っているし、それはまた次のような場合には正常に動作します[data]"monthData"

を養う場合、それは正常に動作します：

• 私はメソッドを持っていますhome.component.tsはhi() {}と記載されており、 と入力してから[data]hi()をhtmlにします。
• hi() {return "hey";}と と記載されているhome.component.tsの方法があります。その後、[data]hi()のHTMLがフィードに含まれています。
• hi(month) {return month;}と と記載されているhome.component.tsには、[data]hi(month)と記載されています。

getDataForMonth()についてはこれが壊れている可能性がありますか？ここで私は気づいていないいくつかの制限がありますか？それはgetDataForMonth()に関連しない何か別の問題かもしれませんか？

Answer 1

* * ngForは完全なオブジェクトを作成し、に渡し、レンダリングする前にこの

のように試すことができます。 console.logをgetDataForMonth（）メソッドに追加して、angleがこの関数を呼び出す頻度を確認します。 良い方法は、毎月の関数結果を持つ配列を作成し、それを反復処理することです。

Answer 2

「バインディングの関数を使用しないでください。あなたの関数は、すべての変更検出サイクル に呼び出されます。そして、角度DEVモードでX2サイクルを実行します」

は{{getDataForMonth（）を使用しないことを意味}}それはあなたのパフォーマンスと間違ったコーディング方法を減らします。

あなたは機能は、パフォーマンスの理由* ngForに呼び出しを事前計算する必要がngFor