Rxjs之创建操作符(Angular环境)
一 of操作符
import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs/observable/of';
import { Observable } from 'rxjs/Observable'; @Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit { constructor() { } ngOnInit() { // 从数组创建 const arr = ['red', 'yellow', 'blue'];
const colors: Observable<string[]> = of(arr);
colors.subscribe((colorsArr: string[]) => {
console.log(colorsArr);
}); // 从迭代器对象创建 const map: Map<string, any> = new Map();
map.set('fruit', 'orange');
of(map).subscribe(
(fruitsMap: Map<string, any>) => {
console.log(fruitsMap);
}
);
} }
二 from操作符
import { Component, OnInit } from '@angular/core';
import { from } from 'rxjs/observable/from';
import { Observable } from 'rxjs/Observable'; @Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit { constructor() { } ngOnInit() { // 从数组创建 const arr = ['red', 'yellow', 'blue'];
const colors: Observable<string> = from(arr);
colors.subscribe((color: string) => {
console.log(color);
}); } }
三 interval操作符
返回从0开始的无限自增整数序列,每个固定的时间间隔发送。第一次并 没有立马去发送, 而是第一个时间段过后才发出。
import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs/observable/interval';
import { Observable } from 'rxjs/Observable'; @Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit { constructor() { } ngOnInit() { interval(1000).subscribe((val: number) => {
console.log(val);
}); } }
四 range操作符
range
操作符顺序发出一个区间范围内的连续整数, 你可以决定区间的开始和长度。
import { Component, OnInit } from '@angular/core';
import { range } from 'rxjs/observable/range';
import { Observable } from 'rxjs/Observable'; @Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit { constructor() { } ngOnInit() { range(600, 10).subscribe((val: number) => {
console.log(val);
}); } }
Rxjs之创建操作符(Angular环境)的更多相关文章
- RxJS之工具操作符 ( Angular环境 )
一 delay操作符 源Observable延迟指定时间,再开始发射值. import { Component, OnInit } from '@angular/core'; import { of ...
- RxJS之转化操作符 ( Angular环境 )
一 map操作符 类似于大家所熟知的 Array.prototype.map 方法,此操作符将投射函数应用于每个值 并且在输出 Observable 中发出投射后的结果. import { Compo ...
- RxJS之过滤操作符 ( Angular环境 )
一 take操作符 只发出源 Observable 最初发出的的N个值 (N = count). 如果源发出值的数量小于 count 的话,那么它的所有值都将发出.然后它便完成,无论源 Observa ...
- RxJS之组合操作符 ( Angular环境 )
一 merge操作符 把多个 Observables 的值混合到一个 Observable 中 import { Component, OnInit } from '@angular/core'; i ...
- RxJS之Subject主题 ( Angular环境 )
一 Subject主题 Subject是Observable的子类.- Subject是多播的,允许将值多播给多个观察者.普通的 Observable 是单播的. 在 Subject 的内部,subs ...
- RxJS 中的创建操作符
RxJs 中创建操作符是创建数据流的起点,这些操作符可以凭空创建一个流或者是根据其它数据形式创建一个流. Observable的构造函数可以直接创建一个数据流,比如: const $source=ne ...
- RxJS中高阶操作符的全面讲解:switchMap,mergeMap,concatMap,exhaustMap
RxJS中高阶映射操作符的全面讲解:switchMap, mergeMap, concatMap (and exhaustMap) 原文链接:https://blog.angular-universi ...
- angular环境搭建时的坑
安装angular环境踩过一些坑,最终还是把工程跑起来了,这里描述一下我的步骤,不排除有些步骤是多余的,希望能对遇到同样问题的小伙伴有帮助. 下载最新版node.js. 安装node,安装过程一路点下 ...
- Python 创建本地服务器环境生成二维码
一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...
随机推荐
- HTML学习-2标记标签-2
三.表单元素 ①<form></form>表单标签,代表表单 主要属性:1.action提交到的页面. 2.method数据提交方式(get显示提交,有长度限制.post隐 ...
- svn分支
在svn上我们除过一般的保存文档外,对于开发source,可以使用 trunk(主线),branch(分线), tag(上线或测试用) 做分支应用开发. trunk上建立代码位置,存放代码. 点击Te ...
- 在windows、linux中开启nginx的Gzip压缩大大提高页面、图片加载速度<转>
为了降低tomcat服务的压力,把页面上的图片采用windows版的nginx进行加载,由于有些图片比较大,加载特别的慢,所以在nginx中打开了gzip的压缩功能.加载图片的速度快了很多. 通过站长 ...
- UI5-学习篇-4-SCP-SAP WEB IDE登录
1.注册SAP账号 登录SAP官网:https://www.sap.com/index.html 注册Register 填完相关信息,勾选条款,然后提交. 账号激活:完成后需到Email邮件中激活链接 ...
- 工作记录 rfcn网络结构 caffe time测速和实际运行中速度不相等。
现象: 用caffe time测试网络结构,前向传播是 8 ms左右, 实际集成后运行的时候,forward耗时大概4-5ms. 输入大小是一致的. 于是开始查这个问题. 最后定位到,差别在propo ...
- unity 向量赋值 传引用?传值?
unity中,Vector2.Vector3之间的任意赋值都是传值 Vector2 v1; ,); v1=v2; v2.x=; Debug.Log(v1);//output: (2.0, 2.0) D ...
- Centos7升级新内核
由于觉得Centos7内核版本还不够高,就想升级下,下面是升级步骤 我使用的方法是使用yum升级内核 使用第三方仓库升级 CentOS 允许使用 ELRepo,这是一个第三方仓库,可以将内核升级到最新 ...
- 10.mysql-触发器.md
目录 定义 语法 定义 当操作了某张表时,希望同时触发一些动作/行为,可以使用触发器完成 语法 -- 需求: 当向员工表插入一条记录时,希望mysql自动同时往日志表插入数据 -- 创建触发器(添加) ...
- mysql如何出查出最近7天,最近30天,最近n天的记录?
已查询浏览量为例:原始数据如下: 思路分析:数据有了,统计某一天的浏览量,所有浏览量,或固定时间段内的浏览量在这里我们就不多说了,大家都会,那我们是如何将最近七天的数据统计出来呢? 首先,我们说的最近 ...
- VC/VS2010中快捷键
序号 热键 备注 1 F7 编译 2 Ctrl + F7 链接 3 Ctrl + F5 运行 4 F9 在光标处设置断点 5 F10 单步跟踪 6 F11 进入函数内部跟踪 7 Shift + F11 ...