TypeError: search.valueChanges.debounceTime is not a function

Question

刚学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 Demo

N.B. 我现在无法在 plunker 上生产任何东西，因为我现在是第一次在 plunker 上写 angular2。我只在 plunker 上写了我的 app.ts 代码。我已经显示了我本地电脑的错误截图。如果你告诉我plunker 运行 angular2项目的方法，我也将不胜感激。

Answer 1

你只需要导入这些来消除你的错误。您会收到运行时错误，因为 Observables 默认情况下只有几个运算符。您必须像这样显式导入它们 -

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

Working example

更新

Angular 6以后，debounceTime导入如下-

import { debounceTime } from 'rxjs/operators';

您可以从此路径导入的其他导入是 -

switchMap
点击
地图
distinctUntilChanged

等..

Answer 2

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

例子

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

Answer 3

你可以试试：

import { debounceTime } from 'rxjs/operators';

Answer 4

两件事：

为每个运算符添加导入

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

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

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

TypeError: search.valueChanges.debounceTime is not a function

TypeError: search.valueChanges.debounceTime is not a function

rxjs

typescript

angular2-forms

angular

更新