Observable event not working in Angular2
Question
I am trying to create a Keyup event in angular2, that is triggered when something is typed in the search box, the event is then logged in the console. owever nothing is displayed in the console. This is my app.component.ts file
/// <reference path="../typings/tsd.d.ts" />
import {Component} from '@angular/core';
import {Observable} from 'rxjs/Rx';
@Component({
selector: 'my-app',
template: `
<input id="search" type="text" class="form-control" placeholder="Search">
`
})
export class AppComponent {
constructor(){
var keyups = Observable.fromEvent($("#search"), "keyup");
keyups.subscribe(function(data) {
console.log(data);
});
}}
And my index.html file is
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Latest compiled and minified CSS -->
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
-->
<link rel="stylesheet" href="app/bootstrap.min.css">
<link rel="stylesheet" href="app/styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Please could someone point out what I am missing here? Thanks
3 answers
solution1
4 ACCPTED 2016-05-31 22:48:37
First, you can go about capturing key presses in another way:
<input (keyup)="onKeyPress()" id="search" type="text" class="form-control" placeholder="Search">
This binds the keyup event to running what you assign to that event binding. You can then add an onKeyPress function in your component with the console.log .
https://angular.io/guide/template-syntax#event-binding
Another thing is that the constructor runs before the view is initialized. So if you insist on binding to events outside of the template, you can do this:
export class AppComponent implements AfterViewInit
And implement an ngAfterViewInit function in the component where you can use that Observable. Be sure to import AfterViewInit from @angular/core .
solution2
2 2016-05-31 22:46:13
You need to bind an event to the input field and bind the input field to an object, doing it the angular way.
HTML:
<input type="text" (keyup)="someFunction()" [(ngModel)]="model.name" />
and then in your backing TS class :
public model: Object = {};
public someFunction() {
console.log(model.name);
}
The two way binding in angular will automatically bind the value of the input to model.name , and the (keyup) event will listen for the event you want.
solution3
2 2016-08-01 06:06:19
You don't have access to the DOM yet in your constructor, so you are actually initializing that observer to listen keyup event on a null item. What you need to do is to initialize that observer in ngAfterViewInit lifecycle hook.
ngAfterViewInit(){
var keyups = Observable.fromEvent($("#search"), "keyup");
keyups.subscribe(function(data) {
console.log(data);
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.