首页 文章

angular2 Observable属性'debouceTime'在类型'Observable<any>'上不存在

提问于
浏览 次
19

我使用 "angular2 webpack" 和 "angular2/form,Observable" ，但遇到错误，需要帮助..

有一个自定义表单验证器 -

import {Observable} from 'rxjs/Rx';
import {REACTIVE_FORM_DIRECTIVES,FormControl, FormGroup, Validators} from '@angular/forms';

emailShouldBeUnique(control:FormControl) {
    return new Observable((obs:any)=> {
      control.valueChanges
        .debouceTime(400)
        .distinctUntilChanged()
        .flatMap(term=>return !this.userQuery.emailExist(term))
        .subscribe(res=> {
            if (!res) {obs.next(null)}
            else {obs.next({'emailExist': true}); }; }
        )});}

我找不到文件 "/projection_direction/node_modules/rxjs/operator/debounceTime.js"

为什么会有这样的错误 -

属性'debouceTime'在类型'Observable'上不存在 .

angular rxjs observable angular2-forms

7 回答

  • 4

    我最近有同样的问题，在我做了之后解决了：

    import { debounceTime } from 'rxjs/operators';

    而且我认为Angular 5也需要添加管道

    something.pipe(debounceTime(100)).subscribe(something...);
    回复于
  • 0

    假设您必须使用 debounceTime() 与多个RxJS运算符，我建议使用 .pipe() 运算符

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

 functionName(value: Observable<string>) {
    return .pipe(
      debounceTime(400),
      distinctUntilChanged(),
      switchMap(location => this.secondFunc(value))
    )
  }
    回复于
  • 2

    对我来说，答案是使用管道：

    .pipe(debounceTime(500))

    另外更改导入：

    import "rxjs/add/operator/debounceTime";

    至：

    import {debounceTime} from 'rxjs/internal/operators';

    是的，我正在关注一个教程，所以希望这会有所帮助

    回复于
  • 43

    确保你已经在main.ts（应用程序被引导的地方）启动了

    import "rxjs/add/operator/map";
import "rxjs/add/operator/debounceTime";
...

    或者一下子

    import "rxjs/Rx";

    延伸

    有a working example

    //our root app component
import {Component, EventEmitter, ChangeDetectorRef} from '@angular/core'
import {Observable} from  "rxjs/Rx";
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>

        <div>debounced message: {{message}}</div>
    </div>
  `, 
  directives: []
})
export class App {

  protected message: string;
  protected emitter = new EventEmitter<string>();
  public obs: Observable<string>;

  constructor() {
    this.name = 'Angular2 (Release Candidate!)'

    this.obs = this.emitter
      .map(x => x)
      .debounceTime(1200)
      ;

    this.obs.subscribe(msg => this.message = msg);
  }

  ngOnInit(){
    this.emitter.emit("hello after debounce");
  }
}

    我们在main.ts有这样的工作：

    //main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';

import "rxjs/Rx"; 

bootstrap(App, [])
  .catch(err => console.error(err));

    检查一下here

    回复于
  • 3

    对于rxjs 6之后来到这里的每个人：

    您现在需要使用 pipe() ：

    什么是

    myObservable$
    .debounceTime(500)
    .subscribe(val => {
    // debounced stuff
})

    现在需要：

    myObservable$
    .pipe(debounceTime(500))
    .subscribe(val => {
    // debounced stuff
})

    https://www.learnrxjs.io/operators/filtering/debouncetime.html

    回复于
  • 26

    你这里有一个错字 . 这是debounceTime，而不是debouceTime :)

    回复于
  • 0

    在angular-cli 1.6.8生成项目中使用angular v5.2.6和rxjs v5.5.6时，我最近遇到了类似的错误 . 我最初有：

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

    因为我订阅了一个控制valueChanges事件，所以我一直收到错误，直到我放入

    import { Observable } from 'rxjs/Rx';

    我希望这有帮助！

    回复于

相关问题