更改事件仅在输入的焦点发生更改后才被调用。我怎样才能使事件在每次按键时触发?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
第二次绑定在每个按键上都发生变化。
更改事件仅在输入的焦点发生更改后才被调用。我怎样才能使事件在每次按键时触发?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
第二次绑定在每个按键上都发生变化。
当前回答
我只是使用事件输入,它工作得很好如下:
在.html文件中:
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
在.ts文件中:
onSearchChange(searchValue: string): void {
console.log(searchValue);
}
其他回答
处理这种情况的另一种方法是使用formControl并在组件初始化时订阅它的valueChanges,这将允许您使用rxjs操作符来执行高级要求,如执行http请求,应用debounce直到用户写完一个句子,获取最后一个值并省略前一个值,等等。
import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@Component({
selector: 'some-selector',
template: `
<input type="text" [formControl]="searchControl" placeholder="search">
`
})
export class SomeComponent implements OnInit {
private searchControl: FormControl;
private debounce: number = 400;
ngOnInit() {
this.searchControl = new FormControl('');
this.searchControl.valueChanges
.pipe(debounceTime(this.debounce), distinctUntilChanged())
.subscribe(query => {
console.log(query);
});
}
}
你要找的是
<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}
然后通过访问绑定this对数据做任何你想做的事情。我的模型在你的。ts文件。
我只是使用事件输入,它工作得很好如下:
在.html文件中:
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
在.ts文件中:
onSearchChange(searchValue: string): void {
console.log(searchValue);
}
我一直在使用keyup在一个数字字段,但今天我注意到在chrome的输入有上升/下降按钮来增加/减少的值,这是不被keyup识别。
我的解决方案是使用keyup和更改一起:
(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"
初步测试表明,这工作良好,将在进一步测试后,如果发现任何错误。
我用下面的代码在Angular 11中解决了这个问题:
<input type="number" min="0" max="50" [value]="input.to" name="to"
(input)="input.to=$event.target.value; experienceToAndFrom()">
并且,experienceToAndFrom()是我的组件中的一个方法。
PS:我尝试了以上所有的解决方案,但都不奏效。