Question

我在rxjs中找到了一些使用debounce和distinctUntilChanged的教程。如何在角度6中实现它？

教程代码是这样的：

UPDATE sub 
SET rn = 'Q', bdate = NOW()
WHERE id IN (43721, 905666, 356748, ...)

这是我的代码：

在html中，我有这个：

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

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

在打字稿中，我有这个：

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

它不起作用。我该如何运作？

Answer 1

您需要注意两件事：

在打字稿中，您未正确初始化Observable。如果要基于DOM事件（例如“输入”）生成Observable，则应使用“ fromEvent”便捷方法

第二，pipe仅用于包装任何运算符。因此，不应在pipe

中使用订阅

编辑

如果使用@ViewChild，则必须在ngAfterViewInit中创建Observable。在此之前将无法访问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)
      });
}

debounceTime和distinctUntilChanged在角度6中

1 个答案:

编辑