2016-11-24 8 views
-2

私はイベント・オブジェクトと観測可能なオブジェクトをバインドしようとしていますが、テキストボックス・フィールドのキーを押すたびに、「押されました:」とコンソールにキー・ストリングが記録されます。キーを押すと何も起こりません。angle2は観測可能なオブジェクトにイベントをバインドします

/// <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)}); 
    } 
} 

なぜ機能しないのですか?

EDITED:地図function..it内部

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

カントリーチデバッガポイントがイベント適切にバインドされません見えます..しかし、なぜ? ngAfterViewInitが呼び出されるまで、あなたは待つべき

+0

キー入力をログに記録するには、 '' –

答えて

5

1)(DOMでテンプレートなしの要素は、あなたがmap機能のコードを変更する必要がある)

2)まだされているか

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

または

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

Plunker Example

+0

をお返事ありがとうございますが、マップfuctionは元々同じです。ちょうどそれがマップされた機能を説明するために変更されました.. – TyForHelpDude

+1

私の更新を参照してください。私はplunkerを追加しました – yurzui

+0

はい私はあなたの方法でそれをやったが、それはうまく動作しますが、コンストラクタの内部でそれを実行したい場合は可能ですが、チュートリアルでそれを見ましたが、私はこのコードをコピーする場合は名前 'ngAfterViewInit'エラーが発生しました..? – TyForHelpDude

関連する問題