在输入元素事件中添加去跳时间，angular10

Question

我在angular中使用了一个简单的输入。

           <ng-template #searchinput>
              <mat-form-field class="w-100" floatLabel="never">
                <input matInput placeholder="Search" [id]="'search_'+col.columnDef" (input)="searchChange($event.target.value, col.columnDef)">
              </mat-form-field>
            </ng-template>

我想在事件中添加debounceTime。

searchChange(event, colName) {
    console.log(event, colName);
    event.pipe(
      debounceTime(300), 
      distinctUntilChanged())
      .subscribe(value => console.log(value)
    );    
  }

但这不是工作的ERROR TypeError: event.pipe is not a function。我需要一些帮助。

Answer 1

您的event实际上是来自输入字段的值。如果您想添加debounceTime，您必须执行以下操作；

private value$ = new Subject<string>();

ngOnInit() {
  this.input$
    .pipe(
      debounceTime(300),
      distinctUntilChanged()
    )
    .subscribe((input: string) => {
      console.log(input);
    }
}

searchChange(input, colName) {
  this.input$.next(input);
}

Answer 2

正确的答案是Marek W的答案。另一种方法是使用FormControl，并将其描述为valueChanges

control=new FormControl();
ngOnInit()
{
 this.control.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged()
    )
    .subscribe((input: string) => {
      console.log(input);
    }
}

和

<input [formControl]="control">