gpt4 book ai didi

angular - 如何在 Angular 7 中设置超时 KeyUp

转载 作者:行者123 更新时间:2023-12-02 17:00:22 26 4
gpt4 key购买 nike

我在 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)' />

Working Example

关于angular - 如何在 Angular 7 中设置超时 KeyUp,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54475317/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com