web-dev-qa-db-fra.com

angular2 La propriété observable 'debouceTime' n'existe pas sur le type 'Observable <tout>'

J'utilise "angular2 webpack" et "angular2/form, Observable" , mais j'ai rencontré une erreur, j'ai besoin d'aide ..

Il existe un validateur de formulaire personnalisé -

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}); }; }
        )});}

Je pourrais trouver le fichier "/projection_direction/node_modules/rxjs/operator/debounceTime.js"

pourquoi est-il tel l'erreur--

La propriété 'debouceTime' n'existe pas sur le type 'Observable'.

angularrxjsobservableangular2-forms
17
Kery Hu

Assurez-vous que vous avez lancé cela dans main.ts (où l'application est amorcée)

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

ou tout à la fois

import "rxjs/Rx";

ÉTENDRE

il y a un exemple de travail

//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");
  }
}

et cela fonctionne quand dans main.ts nous avons:

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

import "rxjs/Rx"; 

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

Vérifiez-le ici

42
Radim Köhler

Pour tout le monde qui vient ici après RXJS 6:

Vous devez maintenant utiliser une pipe():

Quel était

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

doit maintenant être:

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

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

23
user3249027

Vous avez une faute de frappe ici. C'est debounceTime, pas debouceTime :)

4
Can Nguyen

J'ai récemment eu une erreur similaire alors que je travaillais avec angular v5.2.6 et rxjs v5.5.6 sur un projet généré par angular-cli 1.6.8. J'ai eu à l'origine:

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

depuis que je m'abonnais à un événement de contrôle valueChanges et que je continuais à avoir l'erreur jusqu'à ce que je mette

import { Observable } from 'rxjs/Rx';

J'espère que ça aide!

3
GeorgeAnagnostopoulos

Pour moi, la réponse a été d'utiliser le tuyau: 

.pipe(debounceTime(500))

De plus, changer l'importation de:

import "rxjs/add/operator/debounceTime";

À:

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

Et oui, je suivais un tutoriel, donc j'espère que cela aide

2
DHLopez

Disons que vous devez utiliser debounceTime () avec plusieurs opérateurs RxJS, je suggérerais d'utiliser .pipe () operator

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

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

J'ai eu le même problème récemment et j'ai résolu après:

import { debounceTime } from 'rxjs/operators';

Et aussi ajouté le tuyau comme il est nécessaire, je pense pour Angular 5+

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