訂閱中的回調函數不起作用

-1

在我的angular2應用程序中，我有一個回調函數來訂閱。它應該簡單地打印每一個keyup事件發生在我的DOM。我確定，我已經正確安裝了rxjs模塊。訂閱中的回調函數不起作用

下面是代碼：

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-08-05 Kamyar Parastesh

爲什麼在Angular2應用程序中使用jQuery？將一些突變jQuery對象作爲第一個對象傳遞給'fromEvent'將不起作用;我很驚訝它甚至編譯。 – 2016-08-05 18:36:16

要小心，除非你想在你的應用程序中使用所有的操作符，否則應該很少從rxjs/Rx導入， – LookForAngular

$("#search")

，因爲它是在構造函數中執行和元素，只有當ngAfterViewInit()被稱爲存在未發現的元素。

這應該工作：

export class AppComponent { 

    ngAfterViewInit(){ 

     var keyups= Observable.fromEvent($("#search"),"keyup"); 
     keyups.subscribe(data => console.log(data)); 
    } 
}

來源

2016-08-05 18:27:12

有人安排'fromEvent'在我不查找時使用jQuery對象嗎？ – 2016-08-05 18:38:12

不知道jQuery。 –

但是你在代碼片段中使用過它，你應該說「這應該起作用」，至少假設他的'$'是jQuery，而不是'getElementById'的某個別名。 – 2016-08-05 18:41:05

您可以訂閱keyup事件在您的模板這樣

<input id="search" type="text" class="form-control" (keyup)="onKey($event)">

和打印這樣的值：

 onKey(event:any) { 
      console.log(event.target.value); 
     }

來源

2016-08-05 18:27:51

好吧，如果他想把keyups當成一個流，讓他做很多很酷的東西，比如debounce，他應該可以。我確定你的代碼可以工作，但是他的代碼有什麼問題？ – 2016-08-05 18:37:17

更好解決這個問題的方法是使用@ViewChild而不是JQuery聲明。

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 17:00:18 Anyx

訂閱中的回調函數不起作用

回答

相關問題