Question

下面是我的Angular 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);}
        });

   }
}

由于我使用“distinct”运算符，当用户在文本框中键入“Hello”时，我我希望在控制台中只打印字符h，e，l和o，只打印一个“l”。但相反，所有角色都被打印出来了（等等）。

知道如何使用不同的运算符。

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运算符？

1 个答案: