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

Question

如何将 rxjs debounceTime 和 distinctUntilChanged 与角度输入事件 (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