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,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...
随机推荐
- Oracle的基本数据类型(常用)
转自:https://www.2cto.com/database/201810/783959.html 1.字符型 Char 固定长度字符串 占2000个字节 Varchar2 可变长度字符串 占40 ...
- APPium-Xpath,swipe练习
写自动化测试,实现 滚动到 口碑最佳 部分,并且打印出所有 口碑最佳 部分的5个应用名称 # coding:utf-8from appium import webdriverimport time d ...
- golang执行shell命令
ommand := "echo hello” cmd := exec.Command("/bin/bash", "-c", command) byte ...
- 机器学习入门-文本特征-word2vec词向量模型 1.word2vec(进行word2vec映射编码)2.model.wv['sky']输出这个词的向量映射 3.model.wv.index2vec(输出经过映射的词名称)
函数说明: 1. from gensim.model import word2vec 构建模型 word2vec(corpus_token, size=feature_size, min_count ...
- UI5-学习篇-9-本地Eclipse UI5应用发布到SAP前端服务器
参考路径: https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-deployment/ 1.准备环境 2.上载SAP-FIORI前端服 ...
- Crash 文件调试
Xcode目录下执行 find . -name symbolicatecrash 找到symbolicatecrash位置,将其拷贝到debug用的文件夹下 执行命令 export DEVELOPER ...
- redis 哨兵模式 Connection refused
spring整合redis哨兵,修改了bind ,protected 任然连接拒绝,是因为哨兵的mastername 和spring里面的名称不一致..导致拒绝了...... 哨兵模式配置文件 属性 ...
- ACM__并查集
并查集是树型的数据结构,处理不想交集合 主要解决查找和合并的问题 步骤: 初始化 把每个点所在的集合初始化为自身 复杂度为O(N) 查找 查找元素所在的集合,即根节点 合并 将两个元素所在的集合合并在 ...
- C++复习:类和对象
类和对象 基本概念 1)类.对象.成员变量.成员函数 2)面向对象三大概念 封装.继承.多态 3)编程实践 类的定义和对象的定义,对象的使用 求圆形的面积 定义Teacher类 ...
- How to Pronounce the Days of the Week
How to Pronounce the Days of the Week Share Tweet Share Vocabulary study: how to pronounce the days ...