キーアップイベントの角度を遅らせる方法は？

Question

角度4のキーアップイベントを遅らせたいと思います。キーアップイベントを発生させるために500ms待つだけです。 angular.io tutorial の例に従うと、updateText（）は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

：

ちょうど質問本体に答えを追加しないでください、観察

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