Question

我可能会犯这个错误，因为我做的很简单，但我的解决方案很容易出错。

我想要做的就是在输入文本发生变化时（按下键时）对第三方组件执行过滤。

第一种无效的方法：

<input type="text" placeholder="Name Fitler" [(ngModel)]="NameFilter" (keydown)="keyDown($event)" />

问题是在使用最新字符更新NameFilter之前执行按键，因此我的过滤器后面是一个字符

第二种方法没有效果

keyDown(event:KeyboardEvent){
    var input = <HTMLInputElement>event.srcElement; 
    this.NameFilter = input.value + event.key; // <-- have to add the latest character
    this.filterChanged();
}

这种作品但容易出错。 input.value没有最新的字符，所以我添加它但需要担心奇数键等。如果可以，我想避免使用keyCode过滤。

还有其他事件吗？还是更好的方法来获得包括最新密钥在内的价值？（我不想等待钥匙，或进入）

更新这完美无缺

<input type="text" placeholder="Name Fitler" [(ngModel)]="NameFilter" (ngModelChange)="filterChanged()" />

Answer 1

您可以使用(ngModelChange)="..."。

(ngModelChange)="keyDown($event)"

ngModelChange更新[(ngModel)]="NameFilter"时会发出{p> NameFilter。

()里面的[ngModel]只是

的缩写形式（句法糖）

[ngModel]="NameFilter" (ngModelChange)="NameFilter = $event"

另见https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way

Answer 2

没有 NgModel 的示例

<input type="text" (keyup)="onKeyPress($event)">

onKeyPress($event) {
    console.log($event.target.value)
}

Angular2在keypress或keydown上获得整个输入值

2 个答案: