Question

如何为在表格数据上搜索数据的动态搜索框添加反跳时间？我在网站上查看了一些解决方案，但是我的代码有点不同，我不使用任何调节器或其他东西，所以我很困惑。

我的模板代码：

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search element">

和打字稿是：

applyFilter(filterValue: string) {
    this.tableDataSource.filter = filterValue.trim().toLowerCase();
}

我想增加去抖时间，以便每2秒进行一次搜索，并且每次更改都不发送大量请求。

预先感谢

我试图通过管道的另一个方法调用该方法

filterData(filterValue: string) {
    this.applyFilter(filterValue).pipe(debounceTime(2000))
}

但现在它说， pipe在void类型上不存在

Answer 1

您正在对字符串使用管道运算符。您只能对Observable使用管道。因此，您应该在组件中创建一个Subject。 RxJS中的Subject既可以充当Observable，也可以充当Observer。换句话说，它发出值并在值更改时侦听该值。

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

applyFilter(filterValue: string) {
    this.searchSub$.next(filterValue)
}

ngOnInit() {
   this.searchSub$.pipe(
     debounceTime(400),
     distinctUntilChanged()
   ).subscribe((filterValue: string) => {
     this.tableDataSource.filter = filterValue.trim().toLowerCase();
   });
}

每次按applyFilter()方法时，主题将发出filterValue。在您的ngOnInit()中，您应该收听/订阅主题，因此可以在其中使用pipe运算符和debounceTime。

Answer 2

模板：

<input matInput (input)="terms$.next($event.target.value)" type="text" 
  placeholder="Search element">

组件：

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

ngOnInit () {
  this.terms$.pipe(
    debounceTime(400), // discard emitted values that take less than the specified time between output
    distinctUntilChanged() // only emit when value has changed
  ).subscribe(term => {
    // do your search with the term
  });
}

Answer 3

只需使用lodash-decorators和lodash

import { Debounce } from 'lodash-decorators';

class AnyClass {
  constructor() {
    ...
  }

  @Debounce(100)
  filterData(filterValue: string) {
    ...
  }
}

如何在打字稿中的输入搜索框中添加去抖时间？

3 个答案: