如何在 Angular 2 中使用 "distinct" RxJS 运算符？

Question

下面是我的Angular2个组件代码

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);}
        });

   }
}

由于我使用的是 "distinct" 运算符，当用户在文本框中键入 "Hello" 时，我期望控制台中只会打印字符 h 、 e 、 l 和 o ，即只会打印一个 "l" 。但是所有的字符都被打印出来了（ h e l l o）。

知道需要如何使用 distinct 运算符。

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

根据用例，您可能需要整个事件，而不仅仅是之后按下的字母。在这种情况下，使用 map 运算符不是一个好主意，因为您会丢失所有其他信息。

如果是这种情况，您可以为 .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.

如何在 Angular 2 中使用 "distinct" RxJS 运算符？

How to use "distinct" RxJS operator in Angular 2?

rxjs5

angular