javascript - NG2中关于rx Observable.fromEvent

问题描述

问 题

我在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'
一个是分开引入一个是全部引入

这篇关于javascript - NG2中关于rx Observable.fromEvent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！