Как установить тайм-аут KeyUp в Angular 7 - PullRequest
Новая
       38

Как установить тайм-аут KeyUp в Angular 7

0 голосов
/ 01 февраля 2019

Я искал решение в Google, но не нашел.

Пробовал 1: 

<input type="text" #txtSearch (keyup)="onKeyUp(txtSearch.value)">

И search.component.ts 

onKeyUp(val){
    setTimeout(function(){
        console.log(val);
    },500);
}

Пробовал 2

Я использую подобное здесь Как добиться службы debounce для события ввода ключа в angular2 с помощью rxjs , но в Angular 7 не работает.

Наконец

Я ожидаю задержку нажатия на 0,5 с, затем console.log (значение);

1 Ответ

0 голосов
/ 01 февраля 2019

Для таких случаев лучше использовать 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)' />

Рабочий пример

...