rxjs попарно испускает повторяющиеся значения - PullRequest
Новая
       8

rxjs попарно испускает повторяющиеся значения

1 голос
/ 11 июня 2019

Я пытаюсь создать два события прокрутки, наблюдаемых как для направления прокрутки по вертикали и горизонтали.

Я пытался использовать операторы pairwise() и bufferCount(2,1) для фильтрации события вертикальной прокрутки от горизонтального, но проблема в том, чтобы получить повторяющиеся значения для prev.scrollTop и curr.scrollTop

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import { pairwise, tap, filter } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  @ViewChild('scrollable', {static: false}) scrollable: ElementRef;


  ngAfterViewInit() {

    fromEvent(this.scrollable.nativeElement, 'scroll').pipe(
      pairwise(),
      tap(([prev, curr]) => console.log(prev.target.scrollTop, curr.target.scrollTop)),
      filter(([prev, curr]) => prev.target.scrollTop !== curr.target.scrollTop),
      tap((e) => console.log(e)) // <=    Never reached
    ).subscribe();

  }

}

Есть идеи?

воспроизведение стекаблиц

1 Ответ

3 голосов
/ 11 июня 2019

это потому, что вы создали пару nativeElement, который всегда ссылается на один и тот же объект. Таким образом, в основном вы должны pluck примитивное значение вашего желания. 

  fromEvent(this.scrollable.nativeElement, 'scroll').pipe(
      pluck('target','scrollTop'),
      pairwise(),
      tap(([prev, curr]) => console.log(prev,curr)),
      filter(([prev, curr]) => prev!== curr),
      tap((e) => console.log(e)) // <=    Never reached
    ).subscribe();
...