Angular 9如何为输入更改事件(keyup)使用debouncetime
Angular 9中，我们可以使用debounceTime操作符来为输入元素的keyup事件添加延时处理。debounceTime操作符会等待一段时间，在这段时间内如果没有新的事件产生，则触发事件处理逻辑。
下面是如何在Angular 9中使用debounceTime处理输入更改事件的示例：
- 首先，确保已经安装了Angular的RxJS依赖库。可以使用以下命令进行安装：
- 首先，确保已经安装了Angular的RxJS依赖库。可以使用以下命令进行安装：
- 在组件的代码文件中，引入
debounceTime操作符和其他必要的RxJS操作符： - 在组件的代码文件中，引入
debounceTime操作符和其他必要的RxJS操作符： - 在组件类中，使用
debounceTime操作符来订阅输入元素的keyup事件： - 在组件类中，使用
debounceTime操作符来订阅输入元素的keyup事件： - 上面的代码中，使用
fromEvent函数来创建一个可观察对象，该对象会发出输入元素的keyup事件。然后，使用debounceTime操作符来等待500毫秒，如果在这段时间内没有新的事件产生，则触发subscribe中的事件处理逻辑。 - 在组件的模板文件中，使用
ngOnInit方法中所绑定的输入元素的id，添加keyup事件监听： - 在组件的模板文件中，使用
ngOnInit方法中所绑定的输入元素的id，添加keyup事件监听： - 上面的代码中，将
keyup事件绑定到onChange方法上，这样当输入元素发生keyup事件时，就会调用onChange方法。
这样，当用户在输入框中输入内容并停止输入500毫秒后，就会触发keyup事件的处理逻辑。
对于Angular 9中的debounceTime操作符的详细说明和其他RxJS操作符的使用方法，可以参考腾讯云官方文档中的相关内容：
- RxJS debounceTime操作符：https://rxjs.dev/api/operators/debounceTime
- Angular文档：https://angular.cn/docs
注意：以上示例中的代码仅为演示用途，并未完全适用于生产环境。在实际开发中，请根据具体需求进行适当的修改和调整。
相关·内容
7回答
快捷键事件触发多次
、、、
目前，我正在开发Angular 4应用程序。在我的组件Html中，我有一个文本框。每当用户第一次输入任何东西时，我都想做一个API调用来获取一些数据。
问题是如果用户输入'A‘，那么它工作正常并调用API。但是当用户输入"ABC“时，它进行了3次API调用。而不是对每个字母都进行API调用，只需调用一次。
请提出任何解决方案。
组件的HTML：
<input id="inputbox" (keyup)="keyUp($event)"/>
组件：
data: string[]
keyUp(event: any) {
this.load
浏览 0提问于2017-10-16得票数 0
1回答
我对在angular5中使用rxjs5去掉输入很感兴趣，但是在keyup中使用$event，而不是使用valueChanged并将其硬分配给组件(就像许多示例一样)。
在下面的示例中，假设我想使用locsearchTerm进行进一步的处理；
querySearchTerm(event){
let searchTerm : Observable<string> = event.target.value;
let locsearchTerm = searchTerm
.distinctUntilChanged()
浏览 0提问于2017-12-21得票数 0
我正在用Angular7构建一个新的web应用程序。 我有一个数据表，我想基于每列的搜索值构建服务器端搜索功能。我在数据表的每一列的顶部都有一个input元素。每次在任何输入框中更改搜索值时，都应触发搜索筛选。 我想我需要绑定keyup事件来检测值的变化。我使用的是rxjs fromEvent，它确实可以工作，但是它可以检测任何键盘事件的快捷键，而不仅仅是与相关输入框相关的事件。我希望避免不必要的事件，因为这样每次都会调用服务器端过滤。 HTML <table mat-table [dataSource]="data" class="example-table&
浏览 13提问于2019-06-01得票数 1
回答已采纳
1回答
用脱荷法测试角方向
、、、、
我为我的搜索字段编写了一个反命令指令，以防止过多的后端调用/处理。一切都如愿了。然而，我不能为它写一个规范。我希望你们中的一些人能帮我:)如果你想尝试，我创建了一个柱塞。目前，我假定该指令没有按预期初始化。
我的指令
import { NgModel } from '@angular/forms';
import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';
@Directive({selector: '[debounce]&
浏览 2提问于2019-03-26得票数 0
回答已采纳
1回答
我试图用rxjs来捕捉keyup的最后一个事件，但是得到了一堆控制台。 下面是我的angular指令： import { Directive, AfterContentChecked, ElementRef, HostListener } from '@angular/core';
import { fromEvent, merge, Observable } from 'rxjs';
import { distinctUntilChanged, debounceTime, last, map } from 'rxjs/operators';
浏览 34提问于2021-10-12得票数 -1
我使用的是带有角9的RxJS，我尝试在输入中添加一个键绑定，如果用户输入了一个新值，我想启动一个HTTP请求。
我有这样的代码：
fromEvent(this.inputBox.nativeElement, 'keyup')
.pipe(
// wait 300 ms to start
debounceTime(300),
// if value is the same, ignore
distinctUntilChanged(),
// start connection
switchMap(term => this.a
浏览 0提问于2020-03-12得票数 1
回答已采纳
我需要处理一些关于html输入文本的东西，distinctUntilChanged不能正常工作，在Angular 6中的每个字符的文本循环。我如何解决它？
浏览 0提问于2018-05-30得票数 0
我正在学习一些Reactivejs教程，我正在用rx.js实现自动完成。
它看起来很棒，但我想知道如何实现一些功能。看看这段代码：
const $title = $('#title'); // input element
const $results = $('#result');
Rx.Observable.fromEvent($title, 'keyup')
.map(event => event.target.value.trim())
.distinctUntilChanged()
.debounceTim
浏览 1提问于2017-05-21得票数 3
回答已采纳
1回答
我正在使用引导模式弹出在我的角度应用程序(类型记录)。我必须在输入字段中输入的代码作为参数输入到服务中，以便搜索使用相同代码找到的用户信息，这些数据将显示在弹出窗口中，但我希望在输入中键入代码时将其显示出来。那是可能的吗
以下是我试过但没有成功的地方
<input (keyup.enter)="Search()" data-toggle="modal" data-target="#myModal" [(ngModel)]="codeuser" type="text" >
浏览 0提问于2021-08-25得票数 0
我正在尝试实现多个术语的搜索。N
我读到了这个博客： it相似的案例。但我不明白如何使用动态观察值(搜索词输入)来实现它。假设我有30个搜索词的过滤器。简单的解决方案是使用combineLatest到所有的搜索词组件，但效率不高。我的目标是在第一次更改时订阅可观察对象。
我尝试对动态数组使用combineLatest运算符，但它不起作用：(。
我的代码：
import {Component, OnInit, Input, ViewChildren, QueryList, AfterViewInit} from '@angular/core';
import {Table}
浏览 2提问于2017-06-19得票数 0
2回答
我有一个可观察的绑定到输入框上的事件keyUp。
按下每个键。我想console.log‘现在就做点什么’。
如果没有按键5秒，那么我想console.log‘做点别的事情’
import { fromEvent } from 'rxjs';
import { debounceTime, map, switchMap } from 'rxjs/operators';
const searchBox = document.getElementById('search');
const keyup$ = fromEvent(searchBox,
浏览 3提问于2019-09-28得票数 0
回答已采纳
3回答
我正在申请漫威API。
我的要求是，我需要有搜索输入，当用户搜索一些值来显示来自Marvel API的结果时，唯一的问题是我不想按一下按钮就可以转到API并返回结果。当用户键入内部输入时，它必须返回结果。我知道怎么做，当我有按钮，但谁能帮助我做它时，用户只需键入内部输入。当简单按钮存在时，这就是我现在所拥有的。
应用程序，module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angul
浏览 6提问于2018-01-23得票数 1
回答已采纳
13回答
只有在输入的焦点更改后才调用更改事件。我怎样才能使事件在每个按键上触发？
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
第二个绑定在每个按键上都会发生变化。
浏览 5提问于2016-02-12得票数 402
回答已采纳
我想在订阅我的表单域之前用"-“替换空格。但是我在订阅时出错了。错误TypeError:无效的事件目标
import { Component , OnInit } from '@angular/core';
import {FormGroup,FormBuilder} from '@angular/forms';
import {Observable} from 'rxjs/Rx';
@Component({
selector: 'app-root',
template: `<h1>Hello World!&
浏览 0提问于2017-06-19得票数 0
2回答
在等待用户完成文本框中的输入和更新结果后，我正在尝试刷新视图中的datalist。用有角度的指令尝试，用可观察的和不同的超时和退出尝试，但没有运气。我没有选择了。
在html文件中：
<input type="text" class="form-control" id="Other"
(keyup)="onKeySearch($event)" list="dynamicList" formControlName="Other"/>
浏览 1提问于2020-05-29得票数 0
您好，我正在使用angular typescript 12，当我在输入中输入代码并按下inter键时，我试图启动一个引导模式，但我尝试的时候，弹出窗口总是显示出来，甚至不需要输入任何东西 这是我尝试过的:下面是输入 <input (keyup.enter)="Search()" data-toggle="modal" data-target="#exampleModal"
[formControl]="firstNameControl" type="text" > 和弹出模式 <div cl
浏览 47提问于2021-08-26得票数 0
升级Angular后，原始码如下投诉 ngOnInit() {
...
Observable.fromEvent(this.filter.nativeElement, "keyup")
.debounceTime(150)
.distinctUntilChanged()
.subscribe(... 基于此thread，我将导入更改为 import { Observable, of, BehaviorSubject, merge, fromEvent} from "rxjs";
import { map, start
浏览 25提问于2021-04-02得票数 0
回答已采纳
我对Angular和任何其他编程语言都是新手。因此，即使有其他关于这个主题的帖子，我也不太明白如何将debounceTime应用到我的项目中，因为我想出的执行搜索的代码与其他不同。 我在html上有一个输入，它在keyup事件上调用一个函数，如下所示： <input type="text" class="layout-search theme-search" placeholder="Pesquise outro vendedor ou unidade aqui..."
(click)="searchError = f
浏览 17提问于2019-05-22得票数 1
我有一个文本框，在每次输入时都会调用一个webapi。问题是，如果我在文本框中写得稍微快一点，呼叫和呼叫的响应就会变得混乱。
例如，如果我写“你好”
与h通话
用"hel“呼叫
用“你好”打电话
用“地狱”呼叫
用“他”呼叫
每个电话都管理响应数据，所以即使我写了"hello“，我也有与单词"he”相关的最后一个数据。
这里的代码
HTML
<input type="text" class="form-control" [(ngModel)]="txtSearchModel" (keypr
浏览 3提问于2018-06-05得票数 1
回答已采纳
1回答
我有一个组件，它基本上由一个文本框(输入)和一个结果显示区域组成： 📷 <div class="row search">
<div class="col">
<input
id="iptSearch"
type="text"
class="form-control"
placeholder="search blueprints"
(keyup)="keyUp$.next($even
浏览 25提问于2020-07-07得票数 0
回答已采纳
我使用rxjs中的fromEvent()监听用于搜索列表的输入框。当用户按下“TAB”键时，我想跳过该键。如何修改下面的代码，让我们从按下的键跳过Tab键？然后搜索其他按键。
const keyup6$ = fromEvent(searchBox6, 'keyup')
keyup6$.pipe(
map((i: any) => i.currentTarget.value),
debounceTime(1000))
.subscribe(x => {
this.countryId = x;
c
浏览 2提问于2021-06-05得票数 0
1回答
我在我的Range2应用程序中使用，我想对用户输入提供一个非常简单的验证，实际上它更像是文本区域下面的一个小打印警告(基于用户提供的文本)，而不是一个真正的验证。
正如我们所知道的，最佳实践是取消来自事件的输入，如下所示：
Observable.fromEvent(elementRef.nativeElement, 'keyup')
.map(() => myTextArea.value)
.debounceTime(300)
.distinctUntilChanged();
但是，NG2-ace编辑器提供的唯一输出/回调是
浏览 6提问于2016-11-12得票数 1
回答已采纳
我编写了以下代码来清除和延迟按下按钮的垃圾邮件：
app.directive.ts
// Debounce click method for buttons to prevent spamming during asynchronous function waits
import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Subject, Subscription } from 'rxjs'
浏览 1提问于2019-07-12得票数 0
回答已采纳
我有一个输入来搜索我的数据库中的对象，并显示在一个表中，嗯，输入是反应性的，当我停止在那里写1，5秒时，搜索。为此，我有这样的代码
const input = document.getElementById('buscaUsuario');
fromEvent(input, 'keyup')
.pipe(
map((k: KeyboardEvent) => k.target['value']),
debounceTime(1500),
).subscribe(val =>
浏览 1提问于2018-08-22得票数 1
3回答
我正在尝试创建类似于isTyping或not的东西，所以我必须检测用户停止输入的时间大约是3秒，这样我就可以完成我的工作，我可以在他使用以下内容输入时检测到：
ngOnChanges(searchValue: string) {
if (!this.searchChangeObserver) {
Observable.create(observer => {
this.searchChangeObserver = observer;
}).debounceTime(3000)
.subscribe((data)
浏览 5提问于2017-07-14得票数 7
我有一个搜索栏，可以根据id搜索事件。随着在搜索栏中键入更多的数字，搜索栏将不断更新，以根据键入的部分id搜索事件。因此，当我停止输入时，我的最新结果会被以前的请求更新。
举例说明。我通过键入12345进行搜索。
结果显示为12345
然后根据1234的结果进行更新。
然后根据123的结果进行更新。
更新：
“”“
export class SearchComponent implements OnInit {
events: Events[]
triggered = false
constructor(private eventService: EventService) {
浏览 0提问于2019-07-19得票数 0
当用户在输入字段中输入时，正在进行API调用以获取并填充datalist中的数据以实现自动完成(Typeahead)。
control.get('city').valueChanges.pipe(
map((searchText) => searchText.trim().toLowerCase()),
filter(text => text.length > 2),
debounceTime(10),
distinctUntilChanged(),
switchMap(searchText => this.locationServi
浏览 8提问于2018-12-19得票数 0
请您告诉我如何将输入字段type=“密码”转换为type=“.In”，我的演示中有两个输入字段Mobile no和Re-enter mobile number，如果用户输入相同的10数字，则将type=“密码”转换为type=“文本”。
示例:如果您输入移动号码9891234567和重新输入密码9891234567，则两个字段都要保密到type="text“。我们能在角度上做到这一点吗？
这是我的代码
import { Component } from '@angular/core';
import {FormBuilder, FormGroup, Validators
浏览 0提问于2018-08-22得票数 0
回答已采纳
我有一个html格式的搜索输入框，它连接到我的组件文件中的ViewChild。 <input #userSearch type="text" placeholder="Search by Name or Email..."> @ViewChild('userSearch', {static: false}) set userSearch(input: ElementRef|null) {
if (!input) return;
this.setInput(input);
}
public s
浏览 20提问于2019-09-20得票数 1
2回答
基本上，我有一个angular应用程序，我希望(更改)仅在几秒钟内没有发生任何事情后触发。因此，不是每次在输入字段中写入字母时都发送请求，而是只有在写入字母且几秒钟内没有发生任何事情之后，才会发送请求。
浏览 10提问于2019-07-20得票数 1
回答已采纳
ngOnInit(): void {
// convert the `keyup` event into an observable stream
Observable.fromEvent(this.el.nativeElement, 'keyup')
.map((e: any) => e.target.value) // extract the value of the input
.filter((text: string) => text.length > 1) // filter out if empty
浏览 0提问于2019-03-13得票数 0
回答已采纳
以我的生命来说，我做不到这一点。我找了又找，但是我找不到任何例子(所有的例子都是.fromEvent()的，没有一个是在http.get上的)。
在我的模板中，我有这样的输入：
<input type="text" (input)="categoriesSearch($event)">
在我的组件中，我有以下内容：
categoriesSearch(event) {
this.categoriesSubscription = this.apiService
.getCategoriesList(this.uploadForm.
浏览 0提问于2017-05-25得票数 9
回答已采纳
1回答
我想删除字母和只留下数字，验证是好的，但输入视图不能正确更新。变量"quantity“确实改变了它的值，我可以在下面用
<p> {{quantity}} </p>
button-add.component.html
<input
[ngModel]="quantity"
(ngModelChange)="quantity = changeQuantity($event)"
/>
<p> {{quantity}} </p>
button-add.compon
浏览 5提问于2021-05-14得票数 0
有人能解释为什么debounceTime()不是service类中的callable吗？我用fromEvent创建了一个可以观察到的服务，目的是减少代码重复，但我得到了这个错误。
DebounceSearchService
import { Injectable } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
浏览 9提问于2022-06-03得票数 1
回答已采纳
使用angular 7和rxjs 6
<input (input)="onChange($event.target.value)">
为什么以下内容不退出？
onChange(val: string) {
of(val)
.pipe(
debounceTime(300)
).subscribe(valx => {
console.log(valx);
});
}
，但这确实是：
searchTerm$: Subject<string> = new Subject();
浏览 0提问于2019-01-11得票数 5
回答已采纳
1回答
我正在努力使exhaustMap工作，但无法。我希望能够限制api调用的数量。现在，当我搜索并加载它，并在输入中输入另一个值时，代码将发出一个新的api调用。我想限制这一点，这样就不会发生这种情况。
loadItems = () => {
const element: any = document.getElementById('type-ahead')
fromEvent(element, 'keyup')
.pipe(
debounceTime(200),
map((e: any) =&
浏览 1提问于2022-05-09得票数 -1
回答已采纳
我想只发送一个搜索api请求后，一段时间的最终搜索词。例如，在我输入“hello”之后1000毫秒。它应该只发送一个请求。我使用的是Rxjs，Angular 6。
我已经尝试了一些代码，但无法实现所需的输出。
在这里你可以找到stackblitz演示
浏览 12提问于2019-07-20得票数 0
回答已采纳
我在搜索输入方面有问题。在“角2”项目中，我有搜索输入：
<input [(ngModel)]="data.value" (keyup)="input$.next($event)" (focusout)="onFocusOut($event)" />
在我的笔录上：
input$ = new Subject<any>();
ngOnInit() {
this.input$
.do(this.keyUpEventHandler.bind(this))
.debounceTime(3000)
.d
浏览 1提问于2018-03-14得票数 1
回答已采纳
我有一个输入文本“type=”和旁边的一个按钮，它打开了一个日历点击。当在日历文本框中选择一个值时，填充。
我想处理更改文本框以启用其他控件。
只有在文本框中手动输入值时，才会触发change、input等事件。但在我的例子中，我没有接触到输入文本框。
谢谢。
浏览 1提问于2019-08-06得票数 0
1回答
我用debounceTime管道输入了这个文本，这样在用户输入单词时，我们就不会频繁地访问服务器：
this.keyUp$
.pipe(debounceTime(500))
.subscribe(data => this.onInputChanged.emit(data));
但是，如果用户在输入数据后按回车，我想立即调用onInputChanged。
如何根据密钥绕过debounceTime管道？
浏览 8提问于2022-07-11得票数 0
回答已采纳
1回答
我得到了错误:我的脚本上的事件目标无效，我以前用@ViewChild做过，没有任何问题，但当我尝试使用FormGroup时，我得到了错误！
import { Component , OnInit } from '@angular/core';
import {FormGroup,FormBuilder} from '@angular/forms';
import {Observable} from 'rxjs/Rx';
@Component({
selector: 'app-root',
template: `<h1>
浏览 2提问于2017-06-21得票数 2
回答已采纳
我正在构建一个Angular 9应用程序。在这个应用程序中，我得到了一个反应式表单。我想在最后一次更改表单字段后3秒后将此表单自动保存到服务器。 但如果用户继续输入以避免应用程序向服务器发送不必要的更新，我希望这个3秒的延迟重新开始。 这是我现在使用的代码，它可以工作，但即使用户继续输入，它也会发送。 this.form.valueChanges.pipe(auditTime( 3000 )).subscribe(() => {
if (this.form.valid && this.form.dirty) {
this.submitForm
浏览 8提问于2021-02-03得票数 1
回答已采纳
在学习angular2时，遇到了这两种从输入字段读取值的方法，如下所示：
<input type="text"[(ngModel)]="pname"> // I can read the value from --> pname
<input type="text" (keyup)="addvalue($event)"> // I can check for enter press and read text
例如，如果我想写一个ToDo应用程序，并要求用户在输入字段中输入列表，在单击Add按钮后，可
浏览 3提问于2017-06-21得票数 1
2回答
我正在创建一个将广泛使用<input type="number">字段的表，如果没有在表中放置数字，我希望使表的背景色变为红色。
下面是我的表的html示例：
<tr>
<td>
<input type="number" class="amount" name="amount">
</td>
</tr>
下面是我用来验证输入的jquery代码：
$(".amount").blur(function() {
if ($(
浏览 0提问于2015-04-09得票数 0
回答已采纳
1回答
我正在尝试侦听来自Javascript (Angular)的条形码事件。我的要求是它不应该是一个输入(所以它不应该总是被聚焦)，我的RXJS流应该在每次扫描时发出一次，并且排除常规的键盘敲击。
浏览 13提问于2021-01-26得票数 0
回答已采纳
2回答
我正在尝试构建一个响应keyPress事件的UI。
我使用角和RxJS来检测事件。包裹是最新的
代码看起来就像
this.keyboard$ = Observable.fromEvent(document, 'keypress')
.pipe(debounceTime(300))
.subscribe(e => {console.log(e);})
这段代码在正常情况下运行良好，但是当用户按一个键太久时，这会记录下第二个按键事件。
我发现了一项工作，但是keyup 没有达到的目的。
this.keyboard$ = Observable.fro
浏览 0提问于2019-03-31得票数 1
回答已采纳
我有基于angular 6.10和rxjs 6.3的应用程序。我还有一个问题： 这是我的代码： public keyUp = new Subject<string>();
const observable = this.keyUp
.pipe(
map(value => (event.target as HTMLInputElement).value),
debounceTime(300),
distinctUntilChanged(),
flatMap((search) => {
浏览 22提问于2019-01-04得票数 1
1回答
我正在使用Angular 10，并尝试在一段时间内使用RXJS收集window:keyup事件-但不幸的是，这并不是很成功。基本上，我想输入数据，如果在一段时间内没有按下任何键，则应该提交请求。 fromEvent(window, 'keyup').pipe(
map((ev: KeyboardEvent) => ev.key),
scan((acc, value) => acc + value),
debounceTime(500)
).subscribe(key => {
console.log(key);
}); 这就是我的基本方法，基
浏览 7提问于2020-07-14得票数 2
1回答
我有一个datepicker的输入字段-用户可以使用键盘输入分钟，当他们输入一个小于10的值时，它会自动预置起始的零-所以time time 10:1看起来像10:01 (有一个小时输入和一个分钟输入字段)-我有的问题是它会立即显示零，所以很难用不同的值编辑分钟字段-如何使用超时或类似的方法来延迟到displayMinute函数，以便在调用它时延迟执行它一秒左右？
// function to prepend 0 to a minute if the minute is under 10
Calendar.prototype.displayMinute = function (minute)
浏览 10提问于2018-12-14得票数 0
我看到本教程用Angular.js编写了一个演示应用程序。这是Todo演示()，他只需输入一个文本框，然后它就可以很容易地反映在页面上。
我想在Meteor中重新创建这个特性，但效果并不好。首先，由于某些原因，它没有更新最后一封信。另外，用Angular.js做这个演示视频要容易得多，而且工作得更好，在Meteor中有更好的方法吗？
另外，如果有一种方法来访问DOM而不是助手函数呢？在events函数中，我可以使用't‘变量访问DOM，但是在helpers函数中，我不确定如何访问，例如，如果我想从助手函数中的div获取文本。我不知道怎么做。
这是我的Meteor代码，下面是一个现场演示
浏览 1提问于2013-08-24得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
