... import { Subject } from 'rxjs'; import { tap, catchError, debounceTime, distinctUntilChanged } from 'rxjs/operators'; ... export class demoComponent implements OnInit { //状态 codeSearch: boolean = false; searchText: Subject<string> = new Subject<string>(); // 事件调用 searchCode(keyword: string): any { this.searchText.next(keyword); } //调用接口获取数据 getCode(keyword: string): any { if (keyword === '') return; this.codeSearch = true; this.http.get(ApiUrl) .pipe(tap(() => {this.codeSearch = false;})) .subscribe((res: any) => { console.log(res) if (res.code == 200) { this.strategyList = res.data; this.cdr.detectChanges(); if (res.data.length == 0) { this.msg.error('未查询到'); } } else { this.msg.error('获取数据出错'); } }); } constructor() { } ngOnInit() { this.searchText .pipe(debounceTime(300)) .pipe(distinctUntilChanged()) .subscribe(string => { this.getCode(string); }); } }