Rxjs，fromEvent 处理多个事件

Question

I am trying to combine multiple events blur and keyup (enter key only) using fromEvent . I have implemented blur event, how I can combine keyup.enter as well.

I have tried with the filter operator but with the filter, enter is working onblur is not -

Component.ts

this.propertyDescription.forEach((input: ElementRef) => {
    const events = ['blur', 'keyup'];
    from(events)
    .pipe(
        takeUntil(this.unsubscribe$),
        mergeMap((event) =>
            fromEvent(input.nativeElement, event)
        ),
        filter((e: KeyboardEvent) => e.key === 'Enter'),
        map((evt: any) => evt.target.value),
        distinctUntilChanged(
            (pre: any, curr: any) =>
                JSON.stringify(pre) === JSON.stringify(curr)
            )
        )
        .subscribe((caption: string) => {
            console.log(caption);
        });
});

Answer 1

1. Subscription inside a forEach is an inelegant design. It'd lead to multiple (potentially unhandled) subscriptions. You could use merge with Array#map .

2. Also instead of using from you could use merge with multiple fromEvent s.

Try the following

const events = ['blur', 'keyup'];

merge(
  this.propertyDescription.map((input: ElementRef) =>
    merge(
      events.map((event: string) => 
        fromEvent(input.nativeElement, event).pipe(
          map((evt: any) => evt.target.value),
          distinctUntilChanged((pre: any, curr: any) =>
            JSON.stringify(pre) === JSON.stringify(curr)
          )
        )
      )
    )
  )
).pipe(
  takeUntil(this.unsubscribe$)
).subscribe((caption: string) => {
  console.log(caption);
});

Answer 2

What you are doing now is sending "blur" and "keyup" to your main observable.

What you need to do is declare what the "keyup" event does, what the "blur" event does and the apply your logic.

Something more like:

this.propertyDescription.forEach((input: ElementRef) => {
  const blurEvent$ = fromEvent(input.nativeElement, 'blur').pipe(/* your logic for "blur" event */);
  const keyupEvent$ = fromEvent(input.nativeElement, 'keyup').pipe(/* your logic for "keyup" event */);
  merge(blurEvent$, keyupEvent$).pipe(
    takeUntil(this.unsubscribe$),
    /* rest of your logic */
  )
  .subscribe();
}

---

Edit: merge does not take an array. see on stackblitz

Answer 3

better way to do it in angular would be to send events from template

<input #inp (keyup.enter)="valueUpdates$.next(inp.value)" (blur)="valueUpdates$.next(inp.value)">


//ts
valueUpdates$ = new Subject<string>();


this.valueUpdates$
  .pipe(distinctUntilChanged())
  .subscribe((caption: string) => console.log(caption));

Answer 4

If you just want to listen to changes that have been made after leaving the input element ( blur ) or after the user clicked Enter, you could just use the change event instead.

However, if there is some reason you explicitly want to use blur and keyup with Enter, you have to fix your filter operator. Right now, you're filtering out all Events that have no key property with the value 'Enter'. The FocusEvent blur doesn't have that property, so the filter function returns false .

A working filter should look something like this:

filter((e: KeyboardEvent | FocusEvent) => e instanceof FocusEvent || e.key === 'Enter'),