Angular 4 friert beim Aufruf Funktion in * ngFor

Question

Ich habe ein seltsames Problem mit meiner Angular App. Angesichts dieser Komponente:

und diese Vorlage:

die Seite versuchen immer zu laden, bis Chrome mich schließlich aufgefordert, auf die Registerkarte zu töten.

Es funktioniert gut, wenn statt getDataForMonth(month) ich einfach ein Datenobjekt in home.component.tsmonthData benannt haben und dann [data]"monthData"

füttern Es funktioniert auch in den folgenden Fällen fein:

• Ich habe eine Methode in home.component.ts beschrieben als hi() {} und dann feed [data]hi() in meinem HTML.
• Ich habe eine Methode in home.component.ts beschrieben als hi() {return "hey";} und dann feed [data]hi() in meinem HTML.
• Ich habe eine Methode in home.component.ts beschrieben als hi(month) {return month;} und dann feed [data]hi(month) in meinem HTML.

Was ist es mit getDataForMonth() das könnte das brechen? Gibt es hier eine Einschränkung, die mir nicht bewusst ist? Ist es möglich, dass es sich um ein anderes Problem handelt, das nicht mit getDataForMonth() zusammenhängt?

Answer 1

Sie müssen Funktionsaufrufe in * ngFor für Performance Grund vorauszuberechnen. Fügen Sie der Methode getDataForMonth() console.log hinzu, um zu sehen, wie oft angular diese Funktion aufruft. Guter Weg ist, Array mit Funktionsergebnissen für jeden Monat zu erstellen und darüber zu iterieren.

Answer 2

"Verwenden Sie keine Funktionen in Bindings. Ihre Funktion auf jede Änderung Erfassungszyklus. Und Winkel läuft x2 Zyklen in dev-Modus genannt wird"

bedeutet, niemals verwenden {{getDataForMonth() }} Es wird Ihre Leistung und die falsche Art der Codierung verringern.

Sie können wie versuchen diese

Vor * ngFor komplette Objektaufbereitung erstellen und übergeben Sie an * ngFor