作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 Google 中搜索了解决方案,但没有找到。
尝试 1:
<input type="text" #txtSearch (keyup)="onKeyUp(txtSearch.value)">
和search.component.ts
onKeyUp(val){
setTimeout(function(){
console.log(val);
},500);
}
尝试了 2
我在这里使用类似的 How to achieve a debounce service on input keyup event in angular2 with rxjs但在 Angular 7 中不起作用。
最后
我预计 keyup 延迟 0.5s 然后 console.log(value);
最佳答案
对于这种情况,您最好使用 rxJs
中的 debounceTime
。甚至对 Angular 有更好的支持。看看下面的例子-
import { Component } from '@angular/core';
import { of, timer, Subject } from 'rxjs';
import { debounce, debounceTime } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
model: string;
modelChanged: Subject<string> = new Subject<string>();
constructor() {
this.modelChanged.pipe(
debounceTime(500))
.subscribe(model => {
console.log(model);
});
}
changed(text: string) {
this.modelChanged.next(text);
}
}
<input [ngModel]='model' (ngModelChange)='changed($event)' />
关于angular - 如何在 Angular 7 中设置超时 KeyUp,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54475317/
我是一名优秀的程序员,十分优秀!