angular2 이벤트를 관찰 가능한 객체에 바인딩

TyForHelpDude

키 업 이벤트와 관찰 가능한 개체를 바인딩하려고합니다. 텍스트 상자 필드에서 키를 누를 때마다 "you have press :"+ 키 문자열을 콘솔에 기록하고 싶습니다. 오류가 표시되지 않고 키를 누를 때도 아무 일도 발생하지 않습니다. .

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

왜 작동하지 않습니까?

편집 :

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

지도 함수 내에서 디버거 지점에 도달 할 수 없습니다. 이벤트가 제대로 바인딩되지 않은 것 같습니다.하지만 왜?

Yurzui

1) ngAfterViewInit가 호출 될 때까지 기다려야합니다 (아직 DOM에 템플릿 요소가 없습니다)

2) map함수 의 코드를 변경해야 합니다.

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

또는

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

플 런커 예

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

DataGrid의 콤보 상자를 관찰 가능한 컬렉션에 바인딩

분류에서Dev

관찰 가능한 객체 / 동적 인터페이스?

분류에서Dev

Angular2 : 관찰 가능한 배열을 구성 요소에 바인딩하는 동안 오류가 발생했습니다.

분류에서Dev

Tabcontrol 바인딩에 대한 관찰 가능한 컬렉션

분류에서Dev

Polymer에서 관찰 가능한 바인딩 버튼

분류에서Dev

녹아웃 js에서 관찰 가능한 바인딩 방법

분류에서Dev

포함 된 winform 차트를 WPF의 관찰 가능한 컬렉션에 바인딩 할 수 있습니까?

분류에서Dev

웹 API 결과를 관찰 가능한 배열 + Knockoutjs에 바인딩 할 수 없습니다.

분류에서Dev

Asp.Net MVC json 결과를 knockout.js 관찰 가능한 배열에 바인딩

분류에서Dev

angular2 rxjs 관찰 가능한 forkjoin

분류에서Dev

Angular2 관찰 가능한 콜백

분류에서Dev

업데이트 함수를 호출하지 않는 관찰 가능한 배열에 대한 사용자 지정 바인딩

분류에서Dev

Angular2 관찰 가능한 변경 감지 템플릿 업데이트

분류에서Dev

Angular 4 프로젝트에서 관찰 가능한 Angular2-highcharts

분류에서Dev

RxJS에서 관찰 가능한 '완료된'이벤트 생성

분류에서Dev

체인 관찰 가능

분류에서Dev

IsChecked 속성은 관찰 가능한 컬렉션에 바인딩됩니다.

분류에서Dev

angular2 / ionic2에서 동시에 관찰 가능한 요청 수행

분류에서Dev

동일한 뷰 모델과 동일한 관찰 가능한 배열의 여러 영역에 데이터를 바인딩하는 방법은 무엇입니까?

분류에서Dev

WPF 바인딩 데이터 그리드를 문자열 관찰 가능 컬렉션에 연결

분류에서Dev

Angular / angularfire2-관찰 가능한 문서를 읽고 데이터를 객체에 저장합니다. 비동기 파이프 없음

분류에서Dev

Angular2 관찰 가능한 스트림을 비우는 방법

분류에서Dev

RxJava는 체인 네트워크 요청에서 이전에 관찰 가능한 결과를 얻습니다.

분류에서Dev

RXJS Angular 2가 'this'인 경우 트랙을 잃는 관찰 가능

분류에서Dev

Rails의 모델 이벤트에 대한 독립적 인 관찰

분류에서Dev

SwiftUI는 관찰 가능한 객체를 유지합니다.

분류에서Dev

관찰 가능한 구독에서 객체를 배열로 푸시

분류에서Dev

입력 필드의 필드 레이블에 바인딩되지 않는 계산 된 관찰 가능 항목

분류에서Dev

DataGrid가 Double의 목록 또는 관찰 가능한 컬렉션에 바인딩 할 때 행 추가 작업이 허용되지 않습니다.

Related 관련 기사

  1. 1

    DataGrid의 콤보 상자를 관찰 가능한 컬렉션에 바인딩

  2. 2

    관찰 가능한 객체 / 동적 인터페이스?

  3. 3

    Angular2 : 관찰 가능한 배열을 구성 요소에 바인딩하는 동안 오류가 발생했습니다.

  4. 4

    Tabcontrol 바인딩에 대한 관찰 가능한 컬렉션

  5. 5

    Polymer에서 관찰 가능한 바인딩 버튼

  6. 6

    녹아웃 js에서 관찰 가능한 바인딩 방법

  7. 7

    포함 된 winform 차트를 WPF의 관찰 가능한 컬렉션에 바인딩 할 수 있습니까?

  8. 8

    웹 API 결과를 관찰 가능한 배열 + Knockoutjs에 바인딩 할 수 없습니다.

  9. 9

    Asp.Net MVC json 결과를 knockout.js 관찰 가능한 배열에 바인딩

  10. 10

    angular2 rxjs 관찰 가능한 forkjoin

  11. 11

    Angular2 관찰 가능한 콜백

  12. 12

    업데이트 함수를 호출하지 않는 관찰 가능한 배열에 대한 사용자 지정 바인딩

  13. 13

    Angular2 관찰 가능한 변경 감지 템플릿 업데이트

  14. 14

    Angular 4 프로젝트에서 관찰 가능한 Angular2-highcharts

  15. 15

    RxJS에서 관찰 가능한 '완료된'이벤트 생성

  16. 16

    체인 관찰 가능

  17. 17

    IsChecked 속성은 관찰 가능한 컬렉션에 바인딩됩니다.

  18. 18

    angular2 / ionic2에서 동시에 관찰 가능한 요청 수행

  19. 19

    동일한 뷰 모델과 동일한 관찰 가능한 배열의 여러 영역에 데이터를 바인딩하는 방법은 무엇입니까?

  20. 20

    WPF 바인딩 데이터 그리드를 문자열 관찰 가능 컬렉션에 연결

  21. 21

    Angular / angularfire2-관찰 가능한 문서를 읽고 데이터를 객체에 저장합니다. 비동기 파이프 없음

  22. 22

    Angular2 관찰 가능한 스트림을 비우는 방법

  23. 23

    RxJava는 체인 네트워크 요청에서 이전에 관찰 가능한 결과를 얻습니다.

  24. 24

    RXJS Angular 2가 'this'인 경우 트랙을 잃는 관찰 가능

  25. 25

    Rails의 모델 이벤트에 대한 독립적 인 관찰

  26. 26

    SwiftUI는 관찰 가능한 객체를 유지합니다.

  27. 27

    관찰 가능한 구독에서 객체를 배열로 푸시

  28. 28

    입력 필드의 필드 레이블에 바인딩되지 않는 계산 된 관찰 가능 항목

  29. 29

    DataGrid가 Double의 목록 또는 관찰 가능한 컬렉션에 바인딩 할 때 행 추가 작업이 허용되지 않습니다.

뜨겁다태그

보관