TypeError: search.valueChanges.debounceTime не является функцией

Я только изучаю angular2. Во время применения чего-либо при изменении ввода я получаю сообщение об ошибке.

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

 }

Ошибка:

введите описание изображения здесь

Как это решить? Я что-то упускаю?

Демонстрация Plunker

N.B. Я не могу ничего создать в plunker, так как я впервые пишу angular2 в plunker. Я написал только свой код app.ts в plunker. Я показал скриншот ошибки с моего локального компьютера. Я тоже буду признателен, если вы подскажете, как запустить проект angular2 в plunker.


typescript angular rxjs angular2-forms
person user1896653    schedule 13.07.2016    source источник
comment
на самом деле вы смешиваете импорт angular2 в своем plunker, см. Вот рабочая демонстрация angular2 plunker. plnkr.co/edit/XNvJChxONhZpY04Iruf6?p=preview   -  person Pardeep Jain    schedule 13.07.2016
comment
извините, я все еще не уверен, как написать это в plunker. Я последовал щелчку: новый › Angular Js › 2.0.X (TS). Затем я заменил код app.ts своим app.ts. Что еще мне нужно сделать? заменить весь код файла, например app.js, index.html и т. д., на мой?   -  person user1896653    schedule 13.07.2016
comment
Да, в соответствии с вашими потребностями вы также должны изменить index.html, но лучше, если вы разветвите чужой plunker для написания своего кода, потому что мне требуется больше времени, чтобы написать свой собственный код   -  person Pardeep Jain    schedule 14.07.2016

Ответы (4)


arrow_upward
96
arrow_downward

вам просто нужно импортировать их, чтобы удалить вашу ошибку. Вы получаете ошибку времени выполнения, потому что Observables по умолчанию поставляется с несколькими операторами. Вы должны явно импортировать их следующим образом:

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

Рабочий пример

Обновлять

Начиная с Angular 6, debounceTime импортируется следующим образом:

import { debounceTime } from 'rxjs/operators';

другие импорты, которые вы можете импортировать из этого пути, -

  • переключательКарта
  • нажмите
  • карта
  • различноеUntilChanged

так далее..

person Pardeep Jain    schedule 13.07.2016
comment
Я импортирую его с помощью import {debounceTime} from "rxjs/operator/debounceTime", который не работает. - person krv; 11.02.2018
comment
Похоже, между двумя файлами есть разница, мой тоже автозаполняется. Убедитесь, что вы удалили все существующие импорты и заменили их тем, что есть у pardeep. Затем убедитесь, что ваше значение изменено так, как описано в ОП, дважды проверьте свой шаблон, чтобы убедиться, что вы не сопоставляете изменения там, и он должен работать. - person gcalex5; 12.03.2018
comment
Вам нужно импортировать debounceTime(), как это для angular 6 import {debounceTime} from 'rxjs/operators'; - person Danny Connolly; 13.05.2019
comment
import { debounceTime } из 'rxjs/operators'; - person Monish Sen; 20.08.2019
comment
Не работает для меня. Но исправлено добавлением канала .pipe(debounceTime(400)) и импортом import { debounceTime } from 'rxjs/operators'; - person Adrian; 09.06.2020
comment
@ Адриан, спасибо за указание, я обновил ответ. более ранний ответ был написан до выпуска angular v6. - person Pardeep Jain; 10.06.2020

arrow_upward
10
arrow_downward

Поместите debounceTime(400) внутрь функции pipe().

пример

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

arrow_upward
2
arrow_downward

Две вещи:

добавить импорт для каждого оператора

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

а затем используйте каналы для передачи всех операторов RxJS

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

arrow_upward
0
arrow_downward

Можешь попробовать:

import { debounceTime } from 'rxjs/operators';
person soni kumari    schedule 10.04.2020