Angular2输入两次调用方法

为什么此代码调用两次addHero方法？Angular2输入两次调用方法

 @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++; 
     } 
    }

这是一个例子：

（成IF）按压1，压制2，（成IF）按压3，按压4

来源

2016-11-28 inyourmind

什么是 “成IF”？ –

当你做什么时，它会被调用两次？ – philipooo

由于（模糊），addHero（）被调用两次。为什么要添加hello ob模糊？ – user3506588

您有三个不同的方式对您的代码致电addHero：

上的Enter键，同时投入的重点是
在输入文本模糊按下（聚焦丢失）
在按钮点击

你看到的可能就是由上输入文本blur被执行时造成的事实你点击按钮。我会说你应该删除blur处理程序，因为它与按钮点击冲突。

来源

2016-11-28 13:45:32

利用这一点，应该很好地工作

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

来源

2016-11-28 13:50:19 Ash

Angular2输入两次调用方法

回答

相关问题