Comment retarder l'événement key up en angulaire?

Question

Je veux retarder l'événement de clé dans angulaire 4. Je veux juste attendre 500 ms pour déclencher l'événement clé. En essayant de suivre l'exemple dans angular.io tutorial , il apparaît que updateText() n'est pas appelé par observable. Ressemble à un problème avec observable.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Key event Demo {{name}}</h2> 
    </div> 
    <div> 
     <h4> KeyUp Event: </h4> 
     <input #keyUpInput (keyup)="onKeyUp(keyUpInput.value)"> 
     <div> 
     <h5> KeyUp Text: </h5> 
     <p>{{values}}</p> 
     </div> 
    </div> 
    <div> 
     <h4> KeyUp Event With Delay: </h4> 
     <input #keyUpInputDelay (keyup)="onKeyUpDelay(keyUpInputDelay.value)"> 
     <div> 
     <h5> KeyUp Text: </h5> 
     valuesDelay: <p>{{valuesDelay}}</p> 
     valuesDelayText: <p>{{valuesDelayText}}</p> 
     </div> 
    </div> 
    `, 
}) 
export class App implements OnInit { 
    public name:string; 
    public values:string = ''; 
    public valuesDelay:string = ''; 
    public valuesDelayText:string = ''; 

    private typeTerm = new Subject<string>(); 

    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 

    ngOnInit(): void { 
    this.typeTerm.debounceTime(300).distinctUntilChanged().map(term => this.updateText(term)); 
    } 

    public onKeyUp(value: string): void { 
    this.values += value + ' | '; 
    } 

    public onKeyUpDelay(value: string): void { 
    this.valuesDelay += value + ' | '; 
    this.typeTerm.next(value); 
    } 

    public updateText(value: string): void { 
    this.valuesDelayText += value + ' | '; 
    } 
} 

Sample plnkr Demo

Answer 1

Résolu:

juste besoin de souscrire à observer

ngOnInit(): void { 
    this.typeTerm.debounceTime(5000).distinctUntilChanged().subscribe(term => this.updateText(term)); 
    }