javascript - Angular 2 - 如何使用局部变量清除输入？

Question

按照 Angular2 网站的指南，我有这个 html:

<input #something (keyup)="doneTyping($event)">
<button (click)="add(something .value)">Add</button>

使用这个 Controller :

@Component({
  selector: 'my-app',
  appInjector: [SomeService]
})
@View({
  templateUrl: 'index-angular',
  directives:[NgFor]
})
class MyAppComponent {
  name: string;
  stuff: Array<string>;

  constructor(someService: SomeService) {
    this.name = 'Angular2Sample';
    this.stuff= someService.getStuff();
  }
  add(st: string){
    this.stuff.push(st);
  }
  doneTyping($event) {
    if($event.which === 13) {
      this.stuff.push($event.target.value);
      $event.target.value = null;
    }
  }
}

当用户在输入中按下回车键时，doneTyping 方法使用 $event.target.value = null; 清除输入。

但是我无法在按下按钮后做同样的事情。

Answer 1

你可以在按钮中将输入作为参数传递

<input #something (keyup)="doneTyping($event)">

<!-- Input as paramter -->
<button (click)="add(something)">Add</button>

然后在 add 函数中

add(st: HTMLInputElement){
    this.stuff.push(st.value);
    st.value = null;
  }