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不起作用

回答

相关问题