【问题标题】:Subject.onNext is not a functionSubject.onNext 不是函数
【发布时间】:2015-12-20 05:25:22
【问题描述】:

我正在尝试在我的 http 代码中使用一些 reactiveX。为此,我正在创建一个主题,并尝试调用 onNext 函数,但我收到一条错误消息,指出 subject.onNext 不是函数。

html:
<input #search (input)="generateSuggestions($event.target.value)">

ts:

import { Jsonp, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounce';
import { Injectable } from 'angular2/core';

@Injectable()
export class SearchService {
    queryStream = new Subject();

    generateSuggestions(query: string) {
        this.queryStream.onNext(query)
            .debounce(500)
            .map(
                query => this.jsonp.request( `http://urlendpoint/${query}` )
                        .map( (res: Response) => res.json() )
                        .subscribe( results => console.log(results) );
            )
    }
}
var queryStream = new Subject();

原始异常:TypeError:this.queryStream.onNext 不是函数

我所有的普通 http 函数都可以工作( this.jsonp.request(url/query).map().subscribe() ),但 onNext 运算符不起作用。我在导入 flatMap 时也遇到了问题,它似乎与 map 和 debounce 不在同一个 'rxjs/add/operator/...' 文件夹中。

【问题讨论】:

  • 那是因为 onNext() 是旧 RxJS (RxJS 4) 的一部分,而在新 RxJS (RxJS 5) 中,该方法称为 next()
  • 为什么会发生如此重大的变化???!!!!!!我正在拔头发……

标签: angular


【解决方案1】:

替换

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounce';

与:

import * as Rx from "rxjs/Rx";

Subject 替换为Rx.Subject

onNext 替换为next

【讨论】:

【解决方案2】:

(我只是补充上面的答案)

从 rxjs v6 开始,分组发生了变化。 只是提到在使用 rxjs v6 时要记住的事情。

我的package.json

"rxjs": "^6.0.0",
"rxjs-compat": "^6.2.2",
"rxjs-tslint": "^0.1.5",

从 v6 开始,以下内容将不起作用:-

1.

import * as Rx from 'rxjs/Rx'; (was earlier used for Rx.Observable.create(), etc )
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject';

// instead, use :-

import { Observable, Subject, of, from, fromEvent, interval } from 'rxjs';
// cannot use rxjs/Rx from v6 onwards.

2.

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounce';

// instead, use:

import { map, debounce } from 'rxjs/operators'; 

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-06
    • 2019-12-20
    • 1970-01-01
    • 2021-12-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多