Как использовать «отличный» оператор RxJS в Angular 2?

Question

Ниже мой Угловой код 2 компонента

import { Component , OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/distinct'; 

@Component({ 
      selector:'js', 
      template: ` 
         <input type="text" id="txt" value="">       ` 
      }) 


    export class Js1Component implements OnInit{ 

     ngOnInit(){ 

     var data = Observable.fromEvent(document.getElementById('txt'),'keypress') 
     .distinct() 
     .subscribe({ 
      next: (e) => { console.log(e);} 
     }); 

    } 
} 

Поскольку я использую «отчетливый» оператор, когда пользователь «Hello» в текстовом поле, я ожидал, что только символ ч х л и о будут напечатанный на консоли, только один «l» будет напечатан. Но вместо этого все символы печатаются (h e l l o).

Любая идея, как использовать отдельный оператор.

Answer 1

Как указано @estus в комментарии, e - это объект в вашем примере, а не строка. Следовательно, каждый раз он отличается (даже если ключи объекта были одинаковыми, ссылка различна).

Вы можете map событие, которое вы получаете в нажатой клавише с функцией event => event.key.

Observable.fromEvent(this.input.nativeElement, 'keypress') 
    .map(event => event.key) 
    .distinct() 
    .subscribe(e => console.log(e)); // logs key pressed 

В зависимости от используемого варианта вам может понадобиться целое событие, а не только буква, нажимаемая впоследствии. В этом случае использование оператора карты - плохая идея, так как вы теряете всю другую информацию.

Если это так, вы можете предоставить функцию оператору .distinct. По умолчанию это сопоставление тождеств x => x, но вы можете сделать это event => event.key. Затем он рассмотрит элементы в потоке разные, если их свойства .key отличаются.

Observable.fromEvent(this.input.nativeElement, 'keypress') 
    .distinct(event => event.key) 
    .subscribe(e => console.log(e)); // logs whole event (distinct keys) 

На стороне записки, обратите внимание, как я не использую родной DOM API (как getElementById). Вы должны использовать декоратор @ViewChild вместо того, чтобы захватывать элементы из шаблона. The full Plunker is here.