首页 > 开发 > JS > 正文

NG2中关于rx Observable.fromEvent

2017-09-05 12:26:42  来源:网友分享

我在angularjs2中引入Rx.Observable

import { Observable } from 'rxjs/Observable'

使用

Observable.fromEvent(dom,type)

控制台报错:

ERROR TypeError: Observable_1.Observable.fromEvent is not a function

求正确姿势。

补充源码

import { Component } from "@angular/core"import { Observable } from 'rxjs/Observable'import 'rxjs/add/observable/fromEvent'@Component({    selector:"custom",    template:`<div>                    <input (input)="onInput($event)" />                    <button (click)="onAdd()">add</button>                       <ul *ngFor="let item of list">                        <li>{{item}}  <button (click)="onDelete(item)">delete</button></li>                       </ul>                      </div>`})export class Custom {    inputValue = "";    list = ["123"];    numberic(event:any):void{          var value = event.target.value;          function toNumber(string){              if( isNaN(string.slice(0,-1)) ){                  //包含非数字及小数点的字符,直接切掉                  if(/[^\d|\.]/gi.test(string)){                      return string.replace(/[^\d\.]/gi,"")                  }                  //第一位为小数点,直接切掉                  if(string.indexOf(".") === 0){                      return string.slice(1)                  }                  //包含两个小数点,切掉最后一个小数点                  let lastDotIndex = string.lastIndexOf(".");                   let strings = string.split("");                  strings.splice(lastDotIndex,1);                  return strings.join("")              }else{                  return string.slice(0,-1)              }          };          event.target.value = (isNaN(value) ? toNumber(value) : value);          this.inputValue = event.target.value;      }    onInput($event:any):void{        // this.numberic($event);        var dom = $event.target;        console.log("dom",dom,Observable);        var type = $event.type;        Observable.fromEvent(dom,type)        .do((event)=>{            this.numberic(event)        })        .map((event)=>event.target.value)        .subscribe((value){            console.log("value",value);        })    }    onAdd():void{        let hasItemInList =  this.list.some((value,index){            return value == this.inputValue;        });        if(!hasItemInList){            console.log("onAdd");            this.list.push(this.inputValue);        }else{            console.log("已存在相同值,勿须重新添加");        }            }    onDelete(item):void{        console.log("onDelete")        this.list = this.list.filter((value,index)=>{            return item !== value;        });    }} 

解决方案

你需要引入fromEvent
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/fromEvent'
...

或者
import { Observable } from 'rxjs'
一个是分开引入一个是全部引入