关于Angular的RxJS6的新特性的一次踩坑体验

本文记录了在Angular4中使用RxJS进行观察者模式编程时遇到的版本问题及解决方法。作者在尝试运行一个过滤并处理数组元素的示例时,因RxJS版本更新导致原有代码无法运行,通过调整引入方式和使用pipe操作符成功解决问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在网上找一些学习视频学习Angular4,学到了"观察者模式与RxJS"这一部分,参照视频中的案例写demo,然后就开始踩坑了。。。

原demo:

//在一个Angular组件构造函数中添加观察
//具体处理逻辑为过滤出数组中的偶数,并且求平方,然后在构造结束后打印“结束了”
constructor() {
    Observable.from([1,2,3,4])
        .filter(e =>e%2 == 0)
        .map(e => e*e)
        .subscribe(
            e => console.log(e),
            err => console.error(err),
            () => console.log("结束了!")
        )
)

问题来了:

 我不知道为什么就是找不到Observable.from()这么个方法,仔细检查引入都对,简直崩溃了(最烦这些非逻辑性的错误)。最终找到原因了:原demo里的RxJS版本为6.0之前,而RxJS6之后的版本特性发生了部分改变,具体哪些改变我就不赘述了,留下参考的博客地址:https://www.cnblogs.com/timetimetime/p/9139926.htmlhttps://www.imooc.com/article/70323

原因知道后,就可以着手解决了,下面为我修改后的相应代码:

/* 引入部分修改 */
import {from} from 'rxjs';
import {filter, map} from 'rxjs/operators';


//对应代码修改
constructor() {
    from([1,2,3,4]).pipe(
      filter(e =>e%2 == 0),
      map(e => e*e),
    ).subscribe(
      e => console.log(e),
      err => console.error(err),
      () => console.log("结束了!")
    )
)

本人水平有限,如果理解有错漏之处,欢迎路过的大神指正!

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值