类型“Observable”上不存在angular2 Observable属性“debouceTime”

Question

我使用“angular2网页包”和“angular2/表格，可见”，但遇到错误，需要帮助。。

有一个自定义表单验证程序--

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/操作员/DebounceTime.js"

为什么会有这样的错误-

类型“Observable”上不存在属性“debouceTime”。

Answer 1

你这里有个打字错误。这是debounceTime，不是debounceTime:）

Answer 2

对于在rxjs 6之后来到这里的所有人：

您现在需要使用一个管道（）：

是什么

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

现在需要：

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

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

Answer 3

确保你已经在主要方面开始了。ts（应用程序启动的位置）

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

或者一下子

import "rxjs/Rx";

延伸

有一个有效的例子

//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 entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';

import "rxjs/Rx"; 

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

在这里检查