当我们的下拉框是自动搜索的时候, 每一次输入, 都会自动去请求后台数据, 比如输入123, 就会去三次请求:1, 12, 123, 这样就导致不必要的请求.
这个时候使用输入框防抖, 在输入较快的时候, 可以间隔一段时间去请求数据,防止请求过于频繁.

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

value: string;
private getDataFromSubject = new Subject<string>();

   ngOnInit() {
    this.getDataFromSubject
      .pipe(debounceTime(500),distinctUntilChanged())
      .subscribe(value => {
        this.getDataList(value);
      });
   }

  changeValue(value: any) {
    this.getDataFromSubject.next(value);
  }

html

这个时候发现, changeValue获取的值为上一次输入的值.

是因为angular在加载的时候, 先执行ngModelChange, 然后ngModel, 这就导致先执行ngModelChange的时候, 还没有给value进行复制更新, 只有在执行ngModel的时候, 才进行更新值.

将ngModel放在ngModelChange的前面, 如下: