webentwicklung-frage-antwort-db.com.de

eck2 Observable-Eigenschaft 'debouceTime' ist beim Typ 'Observable <any>' nicht vorhanden

Ich benutze "angle2 webpack" und "angle2/form, Observable" , habe aber einen Fehler gefunden, brauche Hilfe ..

Es gibt einen benutzerdefinierten Formularprüfer -

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

Ich konnte die Datei "/projection_direction/node_modules/rxjs/operator/debounceTime.js" finden.

warum gibt es so den fehler--

Die Eigenschaft 'debouceTime' ist beim Typ 'Observable' nicht vorhanden.

angularrxjsobservableangular2-forms
17
Kery Hu

Stellen Sie sicher, dass Sie das in main.ts (wo die App bootstraped ist) initiiert haben.

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

oder alles auf einmal

import "rxjs/Rx";

ERWEITERN

es gibt ein Arbeitsbeispiel

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

und das funktioniert, wenn wir in main.ts haben:

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

import "rxjs/Rx"; 

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

Überprüfen Sie es hier

42
Radim Köhler

Für alle, die nach Rxjs 6 hierher kommen:

Sie müssen jetzt eine pipe() verwenden:

Was war

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

muss jetzt sein:

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

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

23
user3249027

Sie haben hier einen Tippfehler. Es ist debounceTime, nicht debouceTime :)

4
Can Nguyen

Ich hatte kürzlich einen ähnlichen Fehler bei der Arbeit mit angle v5.2.6 und rxjs v5.5.6 in einem Projekt, das mit angle-cli 1.6.8 erstellt wurde. Ich hatte ursprünglich:

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

da ich für ein control valueChanges -Ereignis abonniert habe, habe ich den Fehler so lange erhalten, bis ich ihn ablegte

import { Observable } from 'rxjs/Rx';

Ich hoffe das hilft!

3
GeorgeAnagnostopoulos

Für mich war die Antwort die Pfeife: 

.pipe(debounceTime(500))

Plus Ändern des Imports von:

import "rxjs/add/operator/debounceTime";

Zu:

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

Und ja, ich habe ein Tutorial verfolgt, also hilft das hoffentlich

2
DHLopez

Angenommen, Sie müssen debounceTime () mit mehreren RxJS-Operatoren verwenden. Ich würde vorschlagen, den .pipe () Operator zu verwenden

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

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

Ich hatte vor kurzem dasselbe Problem und löste mich danach:

import { debounceTime } from 'rxjs/operators';

Und auch Rohr hinzugefügt, wie es für Angular 5+ erforderlich ist

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

Aug 2019

Ein Beispiel:

Importe:

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

In der Komponentenklasse:

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");
}
0
Manohar Reddy Poreddy