Question

我使用“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'类型上不存在。

Answer 1

请确保您已在main.ts （应用程序已引导）中启动了

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

或一次性

import "rxjs/Rx";

EXTEND

有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

Answer 2

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

您现在需要使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="savercol text-center" id="regfareId00"> <span class="star icon-round_trip"></span> <input type="radio" class="" name="foo0" value="0~P~~P0IPRT~3207~~29~X|6E~2135~ ~~BLR~07/28/2018 01:30~DEL~07/28/2018 04:15~"> <label class=""><span>₹ 3,344</span></label> </div>：

什么是

pipe()

现在需要为：

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

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

Answer 3

你这里有一个错字。它是debounceTime，而不是debouceTime：）

Answer 4

在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';

我希望这有帮助！

Answer 5

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

.pipe(debounceTime(500))

此外，还可以从以下位置更改导入：

import "rxjs/add/operator/debounceTime";

收件人：

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

是的，我正在学习一个教程，因此希望对您有所帮助

Answer 6

最近我遇到了同样的问题，并在解决之后解决了该问题：

import { debounceTime } from 'rxjs/operators';

我还认为，对于Angular 5+，还添加了管道

something.pipe(debounceTime(100)).subscribe(something...);

Answer 7

假设您必须将 debounceTime（）与多个RxJS运算符一起使用，我建议使用 .pipe（）运算符

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

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

Answer 8

2019年8月

一个例子：

进口：

import { Subject } from "rxjs";
import { debounceTime } from "rxjs/operators";

在组件类中：

resizeEvent: Subject<any> = new Subject<any>();

@HostListener("window:resize", ["$event"])
onResize(event: any) {
  this.resizeEvent.next(event);
}

ngOnInit() {
  console.log("in ngOnInit");

  this.resizeEvent
    .pipe(debounceTime(500))
    .subscribe(this.actualResizeHandler);
}

actualResizeHandler(event: any) {
  //   event.target.innerWidth;
  console.log("in actualResizeHandler");
}

angular2 Observable属性'debouceTime'在'Observable <any>'

8 个答案: