TypeError:search.valueChanges.debounceTime不是函数

时间:2016-07-13 18:03:52

标签: typescript angular rxjs angular2-forms

我只是在学习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));
    };

 }

错误:

enter image description here

如何解决这个问题?我错过了什么吗?

Plunker Demo

N.B。我不能在plunker上制作任何东西,因为我现在第一次在plunker上写angular2。我在plunker只写了我的app.ts代码。我已经在本地电脑上显示了错误的屏幕截图。如果你告诉我在plunker上运行angular2项目的方式,我将不胜感激。

4 个答案:

答案 0 :(得分:88)

你只需要导入这些就可以删除你的错误。您收到运行时错误,因为默认情况下Observables只有几个运算符。你必须像这样明确地导入它们 -

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

Working example

答案 1 :(得分:3)

将debounceTime(400)放入pipe()函数中。

示例

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

答案 2 :(得分:1)

两件事:

为每个操作员添加导入

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

然后使用管道传递所有RxJS运算符

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

答案 3 :(得分:0)

您可以尝试:

import { debounceTime } from 'rxjs/operators';