Question

下面是我的组件代码，我试图使用RxJS＆＃34; throttle＆＃34;操作

import { Component , OnInit , OnChanges , DoCheck  } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/throttle';

@Component({
    selector:'rx1',
    template: `
    <h2> Rx1 Component </h2>
    <button name="btn" valur="click"> 
})

export class Rx1Component implements OnInit {   

    ngOnInit() {
        var button = document.getElementsByTagName('button');

        Observable.fromEvent(button, 'click')
            .throttle(1000) 
            .subscribe(() => console.log('clicked....'));
    }
}

这个简单样本的目的是打印＆＃34;点击....＆＃34;只有当点击之间的最小间隙为1秒时才会显示。

但是当我编译这段代码时，它会显示错误，并指向＆＃34; .throttle（1000）＆＃34;线。

类型＆＃39;数字＆＃39;不能分配给＆＃39;（值：{}）=＆gt;类型的参数SubscribableOrPromise＆＃39;

我在做什么错误。

Answer 1

正如其他人所建议的那样throttle()将Observable视为一个参数，而不是持续时间。但是，您所描述的内容更适合debounceTime()运算符。

值得一提的是，既然你正在使用Angular2，那么总是使用RxJS 5 而不是旧的RxJS 4.我猜你在throttle找到了throttle() {{ 3}}或https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/throttle.md但这些都描述了RxJS 4。

RxJS 5的正确文档为http://reactivex.io/documentation/operators/debounce.html，您可以看到throttleTime()和shiny。

如何使用RxJS＆＃34;油门＆＃34; Angular 2中的运算符

1 个答案: