Angular2 rxjs过滤器双击属性“长度”在类型“MouseEvent”上不存在答案

【问题标题】：Angular2 rxjs filter double click Property 'length' does not exist on type 'MouseEvent'Angular2 rxjs过滤器双击属性“长度”在类型“MouseEvent”上不存在
【发布时间】：2016-11-11 20:27:47
【问题描述】：

我是只是在玩 Rxjs

这段代码有什么问题

我有一个错误

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

仅当按钮被点击两次时。

“MouseEvent”类型上不存在属性“length”。

//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>

更新1

我正在学习这门课程课程.ultimateangular.com 和问题发生在另一个 sn-p :(

更新2 遵循@martin 的提示这似乎有效

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

【问题讨论】：

(尝试(<MouseEvent>ev)而不是ev。我想看看该类型是否正在输出。
@vitiral “MouseEvent”类型的参数不能分配给“（值：MouseEvent，索引：数字）=> 布尔”类型的参数。类型 'MouseEvent' 不匹配签名 '(value: MouseEvent, index: number): boolean'
看起来ev 实际上并不是一个事件——它是一个函数。否则，我不确定是什么问题，对不起！
@Whisher 事件 MouseEvent 确实没有属性 length。顺便说一句，鼠标事件的长度是多少？见developer.mozilla.org/en/docs/Web/API/MouseEvent
@martin 是的，你同意，但在第 4 版的这个例子中，有 jsfiddle.net/staltz/4gGgs/27 但我可能会误解，因为我现在可以看到之前有缓冲区。

标签： angular typescript rxjs rxjs5

【解决方案1】：

如果你只想接受两个鼠标事件然后完成使用take()操作符：

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

【讨论】：

它不起作用我只需单击即可看到消息
我已经使用 bufferCount(2, 1) 更新了线程，它似乎有效，你怎么看？
.take(2) 接受 2 个值并调用 onComplete 回调。因此，如果您想收集这两个值，然后调用 onNext .take(2).toArray()，它会为您提供一个收集的值数组。操作员bufferCount(2) 将多次调用 onNext 回调。我不知道这是不是你想要的。