Angular2輸入兩次方法

Question

為什么這段代碼兩次調用方法'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++;
      }
    }

這是一個例子：

（進入IF）按下1，按下2， （進入IF）按下3，按下4

Answer 1

在代碼上，您可以通過三種不同的方式來調用addHero ：

• 輸入聚焦時按Enter鍵
• 輸入文字模糊（焦點丟失）
• 在按鈕上單擊

您所看到的可能是由於單擊按鈕時對輸入文本進行了blur處理而導致的。 我說您應該刪除blur處理程序，因為它與按鈕單擊沖突。

Answer 2

使用它，它應該可以正常工作

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