angular - debounceTime和distinctUntilChanged在 Angular 6中

我在rxjs中找到了一些使用debounce和distinctuntilchanged的教程。如何在角6中实现它？
教程代码如下：

var observable = Rx.Observable.fromEvent(input,'input');

observable.map(event=>event.target.value)
    .debounceTime(2000)
    .subscribe({
        next:function(value){
        console.log(value)
    }
}

这是我的代码：
在HTML中，我有：

<input class="form-control" [(ngModel)]="userQuestion" type="text" name="userQuestion" id="userQuestions">

在typescript中，我有这个：

import { Subject,Observable } from "rxjs";
import { debounceTime,distinctUntilChanged } from "rxjs/operators";

ngOnInit() {
    // initialization
    this.userQuestion = new Observable;
    this.userQuestion.pipe(
        debounceTime(2000)).subscribe(val => {
            console.log(val)
        }
    )
}

它不起作用。我怎样才能成功？

最佳答案

你需要注意两件事：
在打印脚本中，你没有正确地初始化你的可观察值。如果要基于dom事件（例如“input”）生成一个observate，应该使用“fromEvent”便利方法。
其次，pipe只是用来包装任何运算符。所以订阅不应该在pipe中使用
编辑
如果使用@viewchild，则必须在ngafterviewinit中创建observate。在此之前，无法访问ViewChild。
在模板中

<input #questionInput class="form-control" [(ngModel)]="userQuestion" type="text" name="userQuestion" id="userQuestions">

TS

@ViewChild('questionInput') questionInput: ElementRef;

public input$: Observable<string>;

////
  ...code...
////

ngAfterViewInit() {
   this.input$ = fromEvent(this.questionInput.nativeElement, 'input');
      .pipe(
         debounceTime(2000),
         map((e: KeyboardEvent) => e.target['value'])
      );

     this.input$.subscribe((val: string) => {
         console.log(val)
      });
}