☰

rxjsを使用してAngular2の入力キーアップイベントでデバウンスサービスを実現する方法 質問する

tag-icon • tag-icon javascript angular typescript rxjs rxjs5
rxjsを使用してAngular2の入力キーアップイベントでデバウンスサービスを実現する方法 質問する

入力キーアップイベントでサービスを呼び出そうとしています。

HTML

<input placeholder="enter name" (keyup)='onKeyUp($event)'>

以下はonKeyUp()関数です

onKeyUp(event) {
    let observable = Observable.fromEvent(event.target, 'keyup')
        .map(value => event.target.value)
        .debounceTime(1000)
        .distinctUntilChanged()
        .flatMap((search) => {
            // call the service
        });
    observable.subscribe((data) => {
        // data
    });
}

ブラウザのネットワーク タブから、キー アップ イベントごとにキー アップ関数が呼び出されていることがわかりました (想定どおり)。ただし、私が実現しようとしているのは、各サービス呼び出し間のデバウンス時間を 1 秒にすることです。また、矢印キーを動かすとイベントがトリガーされます。

plunkrリンク

ベストアンサー1

したがって、チェーンは実際には正しいのですが、問題は Observable を作成し、すべてのkeyupイベントでそれをサブスクライブしていることです。そのため、同じ値が複数回印刷されます。単に複数のサブスクリプションがあるだけであり、これは望んでいることではありません。

明らかに、これを正しく行う方法は他にもあります。たとえば、次のようになります。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" (keyup)='keyUp.next($event)'>
    </div>
  `,
})
export class App implements OnDestroy {

  public keyUp = new Subject<KeyboardEvent>();

  private subscription: Subscription;

  constructor() {
    this.subscription = this.keyUp.pipe(
      map(event => event.target.value),
      debounceTime(1000),
      distinctUntilChanged(),
      mergeMap(search => of(search).pipe(
        delay(500),
      )),
    ).subscribe(console.log);
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

更新されたデモをご覧ください:http://plnkr.co/edit/mAMlgycTcvrYf7509DOP

2019年1月: RxJS 6 に更新

おすすめ記事