我如何将 rxjs debounceTime 和 distinctUntilChanged 与 angular 输入事件一起使用（例如，单击或输入）

Question

我如何将 rxjs 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 map((obj: any) => obj.evt.target.value) 过滤并寻找值变化（不同），我将只得到输入值而不是参数。

我的要求是 - 我想等到用户完成输入文本，如果用户重新输入，我想检查值是否与之前的值不同，并且还想获取参数。

Answer 1

您必须在 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

我如何将 rxjs debounceTime 和 distinctUntilChanged 与 angular 输入事件一起使用（例如，单击或输入）

How could I use rxjs debounceTime and distinctUntilChanged with angular input events (e.g., click or input)

rxjs6

angular8