Winkelinterpolationsverfahren ruft die Methode oft

Question

im Winkel 4

app.component.html

<div>Counter: {{GetCount()}}</div> 

app.component.ts

import { Component, OnInit } from '@angular/core'; 
     @Component({ 
      selector: 'app-root', 
      templateUrl: './app.component.html', 
      styleUrls: ['./app.component.css'] 
     }) 
     export class AppComponent implements OnInit { 
    constructor() { 

     } 

    ngOnInit() 
    { 

    } 
    counter:number = 1; 

    GetCount(): any { 

    this.counter++; 
    return this.counter; 

    } 
} 

My Ausgangs war auf dem Bildschirm:

Counter: 4

Wie es möglich ist? Ich rufe die GetCount-Methode nur einmal in meinem HTML auf und es schlägt 4 Mal, wenn ich einen Breakpoint in die Methode einfüge. Was ich hier falsch mache.

Answer 1

Nichts falsch. Angular ruft Ihre Ausdrücke mehrmals auf, um zu überprüfen, ob sich der Wert geändert hat.

Answer 2

Wenn Sie eine Methode wie diese aus dem HTML aufrufen, wird jeder Winkeländerungserkennungszyklus diese Methode aufrufen.

wenn Sie diese Methode nur einmal nennen wollen, schlage ich es nennen vom ngOnInit

ngOnInit(){ 
     GetCount() 
} 
counter:number = 1; 

GetCount(): void{  
    this.counter++;  
} 

in den HTML-Code der couter Variable

<div>Counter: {{counter}}</div> 

Answer 3

Angular drucken gonna bewerten, dass die Expression jedes Mal, Es prüft auf Änderungen, die mit dem Lebenszyklus-Hook DoCheck verknüpft sind.