Как я могу использовать rx js debounceTime и differentUntilChanged с angular событиями ввода (например, щелчок или ввод) - PullRequest
Новая
       31

Как я могу использовать rx js debounceTime и differentUntilChanged с angular событиями ввода (например, щелчок или ввод)

0 голосов
/ 24 февраля 2020

Как я могу использовать rx js debounceTime и distinctUntilChanged с angular событиями ввода (input) или (click)

Я не могу использовать fromEvent, потому что мне также нужно передать параметр (Пример ниже) 

<li *ngFor="let item of items>
 <input [(ngModel)]="item.name" (input)="inputChanged(item.id)">
</li>

Итак, я пошел с Subject (Пример ниже) 

<input type="text" placeholder="Type something..." (input)="inputFn($event, 'myParam')"  #myInput>

@ViewChild("myInput", { static: true }) myInput;
private inputEvent = new Subject<any>();

ngOnInit() {
    this.inputEvent
      .pipe(
        // map((obj: any) => obj.evt.target.value),
        debounceTime(1000),
        distinctUntilChanged()
      )
      .subscribe(res => {
        console.log("res", res.evt.target.value);
      });
  }

  inputFn(evt, param) {
    this.inputEvent.next({evt, param});
  }

В приведенном выше примере не используется distinctUntilChanged(). Если я отфильтрую по карте map((obj: any) => obj.evt.target.value) и посмотрю на изменение значения (отличное), я получу только входное значение, а не параметр.

Мое требование - я хочу подождать, пока пользователь закончит ввод текста, а также, если пользователь при повторном вводе хотите проверить, не совпадает ли значение с предыдущим, а также хотите получить параметр.

1 Ответ

2 голосов
/ 19 апреля 2020

Вы должны использовать в distinctUntilChanged операторе compare function

import { Component, ViewChild, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  @ViewChild("myInput", { static: true }) myInput;
  private inputEvent = new Subject<any>();

  ngOnInit() {
    this.inputEvent
      .pipe(
        debounceTime(1000),
        distinctUntilChanged((previous: any, current: any) => previous.value === current.value)
      )
      .subscribe(res => {
        console.log("res", res.evt.target.value);
      });
  }

  inputFn(evt, param) {
    this.inputEvent.next({evt, param, value: evt.target.value});
  }
}

stackblitz

...