Angular-2 Observable不起作用

以下代碼應該記錄來自keyup事件的數據，取自輸入字段，但沒有任何反應，並且控制檯保持空白（也沒有錯誤）。Angular-2 Observable不起作用

/// <reference path="../typings/tsd.d.ts" /> 

import {Component} from 'angular2/core'; 
import {Observable} from "rxjs/Rx"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <input id="search" type="text" class="form-control"> 
    ` 
}) 
export class AppComponent { 
    constructor(){ 
     var keyups = Observable.fromEvent($("#search"), "keyup"); 
     keyups.subscribe(data => console.log(data)); 
    } 
}

來源

2016-07-17 Roman

使用jQuery與angular2是像具有在2009一隻腳和在2016年 –

你的代碼有幾個問題。

1）。 Observable.fromEvent預計HTML元素作爲第一個參數，但是您傳遞的是jQuery實例。 2）。您正嘗試在構造函數中進行訂閱，該構造函數不保證那時組件內容將被加載。 3）。你使用硬編碼的CSS選擇器#search，你永遠不應該這樣做。現在

，這是你如何解決這個問題：

設置模板參考輸入字段。
初始化Observable.fromEvent在ngAfterContentInit鉤：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <input #search type="text" class="form-control"> 
    </div> 
    ` 
}) 
export class AppComponent { 

    @ViewChild('search') input: ElementRef 

    ngAfterContentInit() { 
    var keyups = Observable.fromEvent(this.input.nativeElement, "keyup"); 
    keyups.subscribe(data => console.log(data)); 
    } 
}

演示：http://plnkr.co/edit/5TFDv0OoV8wWnDYneiFD?p=preview

來源

2016-07-17 09:22:13 dfsq

@ViewChild另一個（ '搜索'）輸入：ElementRef;有紅色錯誤啓示。我應該在頂部導入一些東西嗎？ – Roman

你有沒有檢查演示？您需要從@ angular/core導入'ElementRef'。 – dfsq

是的，現在它可以工作，謝謝。但這不是我想要的確切輸出。我想記錄整個輸入值，沒有字母分隔。 – Roman

爲什麼你會使用觀察到從Rxjs當同樣的事情可以用核心來實現angular2？

//our root app component 
import {Component, Pipe,ViewChild} from '@angular/core'; 
import {myservice} from 'app/service'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
      <h1>angular2</h1> 
      <input #box (keyup)="onKey(box.value,$event)"> 
    <p>{{values}}</p> 
    `, 
}) 
export class AppComponent {  
    values = ''; 

    onKey(value: string,event) { 
    this.values += value + ' | '; 
    console.log(event); 
    } 
}

https://plnkr.co/edit/ZSqLNhSi0lI4HdKhulBf?p=preview

官方文檔：https://angular.io/docs/ts/latest/guide/user-input.html

來源

2016-07-17 09:34:22 micronyks

它確實有用，謝謝。但我想記錄整個輸入值，沒有字母分隔。 – Roman

你能告訴我你是什麼意思嗎？ – micronyks

我工作時，我用的是jquerySelector的@ViewChild功能沒有找到元素一個類似的項目。我改變了它的聲明方式：＃搜索和它的工作。

import { AfterViewInit, Component, ViewChild, ElementRef } from '@angular/core'; 
import { Observable } from 'rxjs/Rx' 
@Component({ 
selector: 'my-app', 
template:` 
    <input #search type="text" class="form-control" > 
` 
}) 
export class AppComponent { 

@ViewChild('search') input: ElementRef 

ngAfterContentInit() { 
    var keyups = Observable.fromEvent(this.input.nativeElement, "keyup"); 
    keyups.subscribe(data => console.log(data)); 
}

來源

2017-06-26 16:56:36 Anyx

你好，歡迎來到StackOverflow。你能分享額外的信息，爲什麼你的答案正在工作，什麼是不同的問題。這會改善它！ – Peter

Angular-2 Observable不起作用

回答

相關問題