Question

के साथ angular2 में इनपुट कीप ईवेंट पर डिबॉन्स सेवा कैसे प्राप्त करें मैं इनपुट कुंजी-अप ईवेंट पर किसी सेवा पर कॉल करने का प्रयास कर रहा हूं।

एचटीएमएल

<input placeholder="enter name" (keyup)='onKeyUp($event)'> 

नीचे onKeyUp() समारोह

onKeyUp(event) { 
    let observable = Observable.fromEvent(event.target, 'keyup') 
     .map(value => event.target.value) 
     .debounceTime(1000) 
     .distinctUntilChanged() 
     .flatMap((search) => { 
      // call the service 
     }); 
    observable.subscribe((data) => { 
     // data 
    }); 
} 

यह ब्राउज़र है कि, यह हर कुंजी-अप पर कुंजी-अप समारोह बुला रहा है के नेटवर्क टैब से पाया गया है घटना (जैसा कि यह करना है), लेकिन जो मैं हासिल करने की कोशिश कर रहा हूं वह प्रत्येक सेवा कॉल के बीच 1sec का डिबॉन्स टाइम है। साथ ही, अगर मैं तीर कुंजी चाल को स्थानांतरित करता हूं तो ईवेंट ट्रिगर होता है।

plunkr link

Answer 1

तो श्रृंखला वास्तव में सही है, लेकिन समस्या यह है कि आप प्रत्यक्ष बना रहे हैं और हर keyup घटना पर यह की सदस्यता है। यही कारण है कि यह एक ही मूल्य कई बार प्रिंट करता है। बस कई सब्सक्रिप्शन हैं जो आप नहीं करना चाहते हैं।

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

अपने अद्यतन डेमो देखें: http://plnkr.co/edit/mAMlgycTcvrYf7509DOP

Answer 2

ठीक है, यहाँ एक बुनियादी debouncer है।

ngOnInit () { 
     let inputBox = this.myInput.nativeElement; 
     let displayDiv = this.myDisplay.nativeElement; 

     let source = Rx.Observable.fromEvent (inputBox, 'keyup') 
      .map ((x) => { return x.currentTarget.value; }) 
      .debounce ((x) => { return Rx.Observable.timer (1000); }); 

     source.subscribe (
      (x) => { displayDiv.innerText = x; }, 
      (err) => { console.error ('Error: %s', err) }, 
      () => {}); 
    } 
} 

आप दो संकेत दिया दृश्य बच्चों (इनपुट और प्रदर्शन) की स्थापना, तो आप debounce काम देखेंगे। सुनिश्चित नहीं है कि यह आपके द्वारा कुछ भी नहीं करता है, लेकिन यह मूल रूप (जहां तक ​​मुझे पता है) बहस करने का सीधा तरीका है, मैं इस शुरुआती बिंदु का उपयोग थोड़ा सा करता हूं, आंतरिक पाठ का सेट सिर्फ एक नमूना है, यह एक सेवा कॉल कर सकता है या जो कुछ भी आपको करने की ज़रूरत है।

Answer 3

मैं सुझाव दूंगा कि आप एंगुलर 2 ट्यूटोरियल की जांच करें जो कि आप जो पूछ रहे हैं उसके समान कुछ का एक साफ और समझाया गया उदाहरण दिखाएं।

https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#observables