ngFür neue Ereignisse auf der Komponente neu gezeichnet, auch wenn außerhalb der ngFor

Question

Meine Fragen bezieht sich auf Angular (2) mit einer RC1 Gabel von angular.io Probe plunkr. Die Datenbindungsfunktion in der ngFor-Vorlage wird so ausgeführt, als ob die Änderungserkennung bei einem beliebigen Ereignis außerhalb von ngFor als wahr erkannt wird. In meinem Beispiel ein Klick auf eine Schaltfläche außerhalb von ngFor.

Ich habe mit und ohne die TrackBy-Funktion versucht (obwohl seine schlechte Dokumentation derzeit so nicht sicher, ob ich es richtig benutze); Ich kann nicht herausfinden, wie man sicherstellt, dass jede Aktion nicht zu einem Neuzeichnen des ngFor führt, da dies sehr teuer sein könnte.

Ergebnis log, wenn darauf geklickt:

1. Taste
2. Zeichnung
3. Zeichnung

Sie das Problem auf dieser plunkr durch die Beobachtung der Konsolenprotokoll leben sehen:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <button (click)="clickOustideFunction()" >hi</button> 
     <h1 *ngFor="let d of data;trackBy:a"> 
     My First Angular 2 App{{drawingForFunction()}} 
     </h1>` 
}) 
export class AppComponent { 
    data= [{"a":1}, {"a":2}]; 

    clickOustideFunction(): void { 
     console.log("button"); 
    } 

    drawingForFunction(): void { 
     console.log("drawing"); 

    } 

} 

Answer 1

Standardmäßig werden alle Vorlagenbindungen nach jedem Ereignis auf Änderungen geprüft. Normalerweise hat eine NgFor-Schleife Bindungen wie {{data.a}}, und diese Bindungen werden alle bei jeder Änderungserkennung auf Dreck überprüft. Wenn Sie stattdessen eine Funktion wie {{drawingForFunction()}} haben, werden diese Funktionen auch jedes Mal ausgewertet, wenn die Änderungserkennung ausgeführt wird.

Angular ändert nur das DOM, wenn es eine Änderung sieht/erkennt, daher wird nichts gerendert, es sei denn, es gibt eine Änderung. Und nur die Elemente, die geändert wurden, werden erneut gerendert (nicht die gesamte Ansicht).

Sie können die Änderungserkennungsstrategie möglicherweise verwenden, um zu reduzieren, wie oft Ihre Komponente auf Änderungen überprüft wird.