TypeError : search.valueChanges.debounceTime n'est pas une fonction

Question

Je suis en train d'apprendre angular2. Au moment d'appliquer quelque chose aux changements d'entrée, j'obtiens l'erreur.

app.ts :

export class AppComponent {
    form: ControlGroup;

    constructor(fb: FormBuilder) {
        this.form = fb.group({
            search: []
        });

        var search = this.form.find('search');
        search.valueChanges
            .debounceTime(400)
            .map(str => (<string>str).replace(' ',''))
            .subscribe(x => console.log(x));
    };

 }

Erreur :

Comment résoudre ce problème ? Est-ce que quelque chose m'échappe ?

Démonstration de Plunker

N.B. Je ne peux rien produire chez plunker car j'écris angular2 pour la première fois chez plunker maintenant. Je n'ai écrit que mon code app.ts sur plunker. J'ai montré la capture d'écran de l'erreur depuis mon ordinateur local. Je vous serais également reconnaissant si vous me disiez comment faire fonctionner un projet angular2 dans Plunker.

Answer 1

Vous devez juste importer ces derniers pour supprimer votre erreur. Vous obtenez une erreur d'exécution parce que les Observables sont fournis par défaut avec seulement quelques opérateurs. Vous devez les importer explicitement comme ceci -

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/map';

<a href="http://plnkr.co/edit/8PIkY2OQ3ZO8mmZNKNNP?p=preview" rel="noreferrer">Working example</a>

Mise à jour

À partir d'Angular 6, debounceTime est importé de la manière suivante : -.

import { debounceTime } from 'rxjs/operators';

d'autres importations que vous pouvez importer à partir de ce chemin sont -

• switchMap
• tapez
• carte
• distinctUntilChanged

etc.

Answer 2

Mettez debounceTime(400) dans une fonction pipe().

exemple

var search = this.form.find('search');
    search.valueChanges
        .pipe(debounceTime(400))
        .map(str => (<string>str).replace(' ',''))
        .subscribe(x => console.log(x));

Answer 3

Deux choses :

ajouter des importations pour chaque opérateur

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

et ensuite utiliser des tuyaux pour passer tous les opérateurs RxJS

    this.searchTextInput.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
      )
      .subscribe((term): void => {
        console.log({ term });
      });

Answer 4

Vous pouvez essayer :

import { debounceTime } from 'rxjs/operators';