2016-11-24 103 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