Question

有人可以告诉我为什么这不起作用吗？

我目前正在学习角度课程，导师在课程开始以后就更新问题让我们陷入困境......我就可观察的话题而言，这就是代码那是不行的。

import {Component, ElementRef} from 'angular2/core'
import {Observable} from 'rxjs/Rx'

import 'rxjs/add/operator/map'

@Component({
    selector: 'my-app',
    template: `
        <input id="search" type="text" class="form-control" placeholder="Search" />
    `
})

export class AppComponent {
    constructor(private _elementRef: ElementRef) {
        var elem = document.querySelector('#search');
        var keyups = Observable.fromEvent(elem, "keyup")
            .map(e => e.target.value)
            .filter(text => text.length >= 3);

        keyups.subscribe(data => console.log(data));
    }
}

这不会向控制台输出任何内容，也不会提供任何错误。

我在这里做错了什么？

**** ****编辑

在拉取我的教师代码并重新运行所有内容后，我确信这是rxjs的版本问题。在这个版本中，我不再需要包括：

import 'rxjs/add/operator/map'

当我编写以下代码时，它按预期工作并输出到控制台。

/// <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")
            .map(e => e.target.value)
            .filter(text => text.length > 3);

            keyups.subscribe(data => console.log(data));
    }
}

当我在调试器中暂停应用程序并查看keyup时，它确实有元素。

另外，为了好奇，这里是我和教练都在使用的html。

<html>

  <head>
    <title>Angular 2 QuickStart</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"></style>
    <link rel="stylesheet" href="app/styles.css">
    <style>
        body { padding: 30px; }
    </style>
    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.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>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

Answer 1

在您的代码中elem将等于null。

我认为您应该将代码移到ngAfterViewInit挂钩。它就像“负载”一样。对于组件。

另见

Lifecycle Hooks

<强> Plunker

角度2中的可观察量和事件问题

1 个答案: