RXJS运算符不是函数

时间:2018-05-14 13:39:21

标签: vue.js rxjs observable

当我尝试使用带有rxjs的vue-rx在vue中使用rxjs时,我收到此错误。

[Vue warn]: Error in created hook: "TypeError: messageObservable.fromEvent(...).map(...).debounceTime is not a function"

我没有看到我查看的文档中的任何错误导入,并且在我的开发环境中构建JS时没有出现任何构建错误。

我是我的进口商品

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

这是打电话给这些方法的理由。

const messageObservable = Observable;

subscriptions(){
        message$: messageObservable
    },
    created(){
        message$.
        fromEvent(document.querySelector('textarea'), 'input').
        map(event => event.target.value).
        debounceTime(500).
        distinctUntilChanged().
        subscribe({
                next: function(value) {
                    console.log(value);
                }
            });
    },

1 个答案:

答案 0 :(得分:0)

您所遵循的教程似乎是最新的。此imports不再有效。 (see changelog

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

最新且稳定的版本为rxjs6。这是使用它的正确方法:

import { fromEvent, map, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'
import { Observable } from 'rxjs';

...

created() {
  message$.
    pipe(
      map(event => event.target.value),
      debounceTime(500),
      distinctUntilChanged()
  ).subscribe(console.log);
}

我猜这是您想要使用fromEvent

created() {
      message$.
        pipe(
          switchMap(val => fromEvent(document.querySelector('textarea'), 'input'))
          map(event => event.target.value),
          debounceTime(500),
          distinctUntilChanged()
      ).subscribe(console.log);
}