Question

我想向服务器发送一个请求，以根据用户选择的日期过滤列表，但是我想为此使用反跳，以免向后端发送垃圾邮件。

我的TS组件

@ViewChild('searchInputDateStart', {static: false}) searchInputDateStart: ElementRef;

ngAfterViewInit() {
  fromEvent(this.searchInputDateStart.nativeElement, 'dateInput').pipe(
    map((event: any) => {
      return event.target.value;
  }),
  debounceTime(500)
  ).subscribe((filterValue: string) => {
    this.startDateToFilterFor = filterValue;
    this.sendRequest();
  });
}

我的模板

<mat-form-field appearance="fill"
                          fxFlex.lt-md="20"
                          fxFlex.gt-sm="40"
                          color="accent">
            <input id="inputDateStart"
                   matInput
                   #searchInputDateStart
                   [matDatepicker]="pickerStart">
            <mat-datepicker-toggle matSuffix
                                   [for]="pickerStart"></mat-datepicker-toggle>
            <mat-datepicker #pickerStart></mat-datepicker>

</mat-form-field>

相同的方法适用于普通文本字段上的“ keyup”事件，就像answer一样，但不适用于日期选择器

Answer 1

这是一种简单的方法：

https://stackblitz.com/edit/angular-s49hsb-gqlydz?file=app/datepicker-overview-example.html

@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {
  private date$ = new BehaviorSubject<Date | null>(null);
  private destroy$ = new Subject();

  get date() {
    return this.date$.value;
  }
  set date(value) {
    this.date$.next(value);
  }

  ngOnInit() {
    this.date$.pipe(
      debounceTime(500),
      // you could use a switchMap to cancel any pending requests
      switchMap(date => this.getData(date)), 
      takeUntil(this.destroy$), // stop any pending actions if component is destroyed
    ).subscribe(result => {
      console.log(result);
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  getData(date: Date) {
    return of('Some http call maybe for ' + date);
  }
}

并在您的模板中：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

您还可以在dateChange上使用matDatepicker事件，而不是在date上使用双向绑定：

<input matInput [matDatepicker]="picker" placeholder="Choose a date" (dateChange)="date$.next($event.value)">

所以现在您可以删除组件类中的date属性。

Answer 2

在输入日期值时去抖动是否有意义？一个日期是一个全有或全无的东西......一个人不能输入半个日期

带有去抖动输入更改事件的日期选择器

2 个答案: