Keyup event fire multipletime

Question

目前，我正在開發Angular 4應用程序。在我的組件Html中，我有一個文本框。無論何時用戶首先鍵入任何我想要進行API調用以獲取某些數據。

問題是如果用戶鍵入'A'，那麼它工作正常，並調用API。但是當用戶輸入「ABC」時，它會進行3次API調用。應該爲每個字母進行API調用，而不是隻進行一次調用。

請提出任何解決方案。

組件的HTML：

<input id="inputbox" (keyup)="keyUp($event)"/> 

組件：

data: string[] 

keyUp(event: any) { 
this.loadDataApiCall(); 
} 

loadDataApiCall() { 
// calling api to load data. 
//fill data into 
} 

我能解決的角4

Answer 1

RXjs的幫助，這個問題如果你只想要一個API調用就可以使用blur事件，當控件失去焦點時發出：

<input id="inputbox" (blur)="keyUp($event)"/> 

Answer 2

試試這個：

keyUp(event: any) { 
this.loadDataApiCall(); 
event.stopImmediatePropagation(); 
} 

Answer 3

很可能需要添加一個timeout您的來電和每一個被觸發因此只有最後的呼叫被調用時清除它。

data: string[] 

keyUp(event: any) { 
    window.clearTimeout(window.apiCallTimeout); 
    window.apiCallTimeout = window.setTimeout(this.loadDataApiCall, 100); 
} 

loadDataApiCall() { 
// calling api to load data. 
//fill data into 
} 

這意味着，當用戶停止輸入後100ms內完成調用。此外，如果他鍵入「a」，並在一段時間後鍵入「bc」，則會發出兩個電話。當然，您可以延長時間以滿足您的要求。

Answer 4

Observable.fromEvent(yourDomElement, 'keyup').auditTime(100).subscribe(()=>{ 
     doSomething(); 
    }); 

Answer 5

實現這個正確的方法是在你的KEYUP

註冊事件，並調用API的某個時候，而之後保存最新值和檢查，最後登記的值相匹配的最新註冊值

所以

keyUp(event: any) { 
    this.latestValue = event.target.value; 
    this.registerApiCall(event.target.value); 
} 

寄存器FUNC

registerApiCall(value){ 
     setTimeout(this.loadDataApiCall.bind(this), 500, value) 
    } 

API CAL升

loadDataApiCall(value) { 
    if (this.latestValue == value){ 
    // calling api to load data. 
    //fill data into 
    } 
} 

見工作實施例中this plnk

編輯：

Observable.fromEvent（yourDomElement， 'KEYUP'）auditTime（100）。訂閱（（）=> {doSomething（）; }）;

由陳楊華是RxJs實現，它看起來好多了，這裏是一個working plnkr

Answer 6

如果你願意改變你的形式反應形式，這將是非常容易

this.form.get("input").valueChanges.debounceTime(1000).subscribe((value) => {}); 

反應式表格讓您可以訪問價值變化和狀態變化的可觀察性。我們基本上訂閱那個觀察值，每當它發生變化時它就會發出值，並且我們增加一秒的延遲，這樣如果用戶仍在鍵入並更改值，那麼它將不會執行我們的訂閱中的代碼。

Answer 7

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <input type="text" (keyup)='keyUp.next($event)'> 
    </div> 
    , 
}) 
export class App { 
    name:string; 

    public keyUp = new Subject<string>(); 

    constructor() { 
    const subscription = this.keyUp 
     .map(event => event.target.value) 
     .debounceTime(1000) 
     .distinctUntilChanged() 
     .flatMap(search => Observable.of(search).delay(500)) 
     .subscribe(console.log); 
    } 
}