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); 
    } 
}