Question

我已经在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中无法正常工作。

最后

我希望按键延迟为0.5秒，然后是console.log（value）;

Answer 1

在这种情况下，最好使用debounceTime中的rxJs。甚至对角度都有更好的支持。看看下面的示例-

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 7中设置超时KeyUp

1 个答案: