2016-11-24 107 views
-2

我嘗試綁定鍵盤事件和可觀察對象,每次按下文本框字段中的鍵時,我想記錄「您按下了:」控制檯中的+鍵字符串,沒有任何錯誤顯示,但按下鍵時也不會發生任何事情。angular2將事件綁定到可觀察對象

/// <reference path="../../../typings/tsd.d.ts" /> 
import { Component } from '@angular/core'; 
import {Observable} from 'rxjs/Rx'; 
@Component({ 
    moduleId:module.id, 
    selector: 'search-samp', 
    template: '<input id="search" type="text" class="form-control" placeholder="search">' 
}) 
export class SearchComponent { 
    constructor(){ 
     var keyups = Observable.fromEvent($("#search"), "keyup").map(e=> {e.target.value}); 
     keyups.subscribe(data => { 
      debugger 
      console.log("you have pressed:"+data)}); 
    } 
} 

爲什麼它不工作?

編輯:地圖function..it內

var keyups = Observable.fromEvent($("#search"), "keyup").map(function(e){debugger}); 

着到達調試點看起來事件從來沒有正確綁定..但爲什麼呢?

+0

要記錄keyup,你可以使用'' –

回答

5

1)你應該等到ngAfterViewInit被稱爲(沒有模板在DOM元素還)

2)你必須改變map功能的代碼,通過

.map(e => { return e.target.value; }) 

.map(e => e.target.value) 

Plunker Example

+0

謝謝你的回答,但map功能已經在原創中了。只需看看我編輯之前分享的代碼片段即可。只是改變它來解釋從未觸發映射函數.. – TyForHelpDude

+1

看到我的更新。我已經添加了一個plunker – yurzui

+0

是的,我做到了這一點與你的方式,它工作正常,但whatif我想在一個構造函數內運行它我可能看到它在教程中,但如果我複製它內部代碼無法找到名稱'ngAfterViewInit'「錯誤發生..? – TyForHelpDude