html - Angular 2 จำกัดจำนวนของเหตุการณ์หรือการกระทำที่ถูกเรียกใช้บนคอนโทรล

ในแอปพลิเคชันของฉันมีช่องป้อนข้อมูลที่ฉันใช้ค้นหาค่าที่ป้อนเข้าไป ฉันทำให้มันค้นหาเมื่อค่าภายในกล่องข้อความมีการเปลี่ยนแปลง โค้ดบางอย่างมีลักษณะดังนี้:

<input id="searchTextField" [(ngModel)]="searchText" (ngModelChange)="SearchTextChange()" />

โค้ด Typescript ฝั่งหลังเป็นแบบนี้ :

private SearchTextChange(): void {
//do search 
}

ปัญหาคือฉันตระหนักว่าสิ่งนี้ไม่ค่อยมีประสิทธิภาพ เพราะฉันสังเกตว่าในหลายกรณี เมื่อผู้คนพิมพ์คำ ฉันไม่ต้องการให้ค้นหาเมื่อพิมพ์ตัวอักษร 'a' หรือ 'app' ในขณะที่คำที่ตั้งใจอาจเป็น 'apple' หรืออะไรทำนองนั้น มีวิธีจำกัดจำนวนการค้นหาที่ถูกเรียกใช้งานได้ใน Angular 2 หรือ TypeScript หรือไม่? เพื่อที่ฉันจะทำการค้นหาได้ไม่เกินทุก 2 วินาที หรือให้ Angular เรียกใช้อีเวนต์บนคอนโทรลเดียวกันเพียง 1 ngModelChange ทุก 2 วินาทีเท่านั้น?

คำตอบ #1

แม่แบบ :

<input id="searchTextField" [(ngModel)]="searchText" />

ใส่โค้ดนี้ในคอมโพเนนต์ของคุณ:

searchText:string;

ngAfterViewInit()
{
    let inputElm = document.getElementById("searchTextField");
    Observable.fromEvent(inputElm , 'keyup').debounceTime(200).subscribe( res => {
        // this will wait for 200ms and then this will called on input
        // call you api here like
        // this.get(searchText).subscribe();
    });
}