web-dev-qa-db-ja.com

Angular 7でタイムアウトキーアップを設定する方法

Googleでソリューションを検索しましたが、見つかりませんでした。

試してみました1：

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

そしてsearch.component.ts

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

2を試しました

私はここで同様のものを使用しています rxjsを使用してangular2で入力キーアップイベントでデバウンスサービスを実現する方法 がAngular 7が機能していません。

最後に

キーアップ遅延が0.5秒、次にconsole.log（value）;

angularsettimeoutdelayangular7
2
Long Hoàng Nguyễn

このような場合は、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)' />

実例

4
Pardeep Jain