Angular2 rxjs过滤双击Property＆＃39; length＆＃39;在类型＆＃39; MouseEvent＆＃39;上不存在

Question

我＆＃39;米 只是玩Rxjs

这段代码有什么问题

我收到了错误

我的目标是设置“我的消息”

仅在单击按钮两次时才显示。

财产＆＃39;长度＆＃39;类型＆＃39; MouseEvent＆＃39;。

上不存在

// JS

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  implements OnInit {
  message = 'Hello Rxjs';
  @ViewChild('btn') btn: ElementRef;
  ngOnInit(){
    let clicks = Observable.fromEvent<MouseEvent>(this.getNativeElement(this.btn), 'click')
    .filter(ev => ev.length >= 2)
    .map(e => 'My Message')
    .subscribe(msg => this.message = msg);
  }
  getNativeElement(element){
    return element.nativeElement;
  }
}

// HTML

<h1>
  <button #btn>Click</button>
  {{message}}
</h1>

UPDATE1

我正在学习这门课程 courses.ultimateangular.com 和问题 发生在其他代码段中:(

UPDATE2 跟随@martin的暗示 这似乎有效

let clicks = Observable.fromEvent<MouseEvent>(this.getNativeElement(this.btn), 'click')
    .bufferCount(2, 1)
    .map(e => 'ah Pippo')
    .subscribe(msg => this.message = msg);

Answer 1

如果您只想接受两个鼠标事件，然后完成使用take()运算符：

let clicks = Observable.fromEvent<MouseEvent>(this.getNativeElement(this.btn), 'click')
  .take(2)
  .map(e => 'My Message')
  .subscribe(msg => this.message = msg);