如何在角度上延遲鍵盤事件？

我想在角度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

來源

2017-09-06 nayakam

，請不要在答案添加到問題的身體。我已經回滾你的編輯。如果您找到了解決方案，那麼您可以爲自己的帖子添加答案 – bolov

解決：

只需要訂閱觀察到

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

來源

2017-09-07 00:17:27 nayakam

如何在角度上延遲鍵盤事件？

回答

相關問題