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

最近在网上找一些学习视频学习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.html,https://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("结束了!")
    )
)

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

 

 

 

你可能感兴趣的:(前端)