Angular2 Eingang Aufruf zweimal Methode

Question

warum dieser Code Aufruf zweimal die Methode ‚addHero‘?

 @Component({ 
     selector: 'little-tour', 
     template: ` 
     <input #newHero 
      (keyup.enter)="addHero(newHero.value); newHero.value='' " 
      (blur)="addHero(newHero.value); newHero.value='' "> 
     <button (click)=addHero(newHero.value)>Add</button> 
     <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul> 

     <p>{{pressed}}</p> 
     ` 
    }) 
    export class LittleTourComponent { 
     number = 1; 
     pressed=''; 
     heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; 
     addHero(newHero: string) { 
      if (newHero) { 
      if (this.heroes.join('').indexOf(newHero) < 0) { 
       this.heroes.push(newHero); 
      } 
      this.pressed+=' **(into IF)** '; 
     } 
     //newHero= " "; 

     this.pressed+='pressed ' +this.number+', '; 
     this.number++; 
     } 
    } 

Dies ist ein Beispiel:

(in IF) 1 gedrückt, 2 gedrückt, (in IF) 3 gedrückt, 4

Answer 1

Sie drei gedrückt haben verschiedene Möglichkeiten, auf Ihren Code addHero zu nennen:

• On-Taste gedrückt eingeben, während das Eingangs
• Auf Eingabe von Text Unschärfe fokussiert wird (Fokus verloren)
• Auf Taste

Wahrscheinlich klicken, was Sie sehen, wird durch die Tatsache verursacht, dass blur auf Eingabe von Text ausgeführt wird, wenn Sie klicken auf die Schaltfläche. Ich würde sagen, Sie sollten blur Handler entfernen, da es mit Tastenklick in Konflikt steht.

Answer 2

diese Verwendung, sollte es

<input #newHero 
      (keyup.enter)="test(newHero.value); newHero.value='' " 
      (change)="test(newHero.value); newHero.value='' ">