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：

在输入聚焦时按下输入键
输入文字模糊（焦点丢失）
点击按钮

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

Answer 2

使用它，它应该可以正常工作

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

Angular2输入调用两次方法

2 个答案: