NG2中关于rx Observable.fromEvent

发布于 2022-09-04 18:29:59 字数 2804 浏览 12 评论 0

我在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;
        });
    }
} 

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

倾其所爱 2022-09-11 18:29:59

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文