一 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环境)的更多相关文章

  1. RxJS之工具操作符 ( Angular环境 )

    一 delay操作符 源Observable延迟指定时间,再开始发射值. import { Component, OnInit } from '@angular/core'; import { of ...

  2. RxJS之转化操作符 ( Angular环境 )

    一 map操作符 类似于大家所熟知的 Array.prototype.map 方法,此操作符将投射函数应用于每个值 并且在输出 Observable 中发出投射后的结果. import { Compo ...

  3. RxJS之过滤操作符 ( Angular环境 )

    一 take操作符 只发出源 Observable 最初发出的的N个值 (N = count). 如果源发出值的数量小于 count 的话,那么它的所有值都将发出.然后它便完成,无论源 Observa ...

  4. RxJS之组合操作符 ( Angular环境 )

    一 merge操作符 把多个 Observables 的值混合到一个 Observable 中 import { Component, OnInit } from '@angular/core'; i ...

  5. RxJS之Subject主题 ( Angular环境 )

    一 Subject主题 Subject是Observable的子类.- Subject是多播的,允许将值多播给多个观察者.普通的 Observable 是单播的. 在 Subject 的内部,subs ...

  6. RxJS 中的创建操作符

    RxJs 中创建操作符是创建数据流的起点,这些操作符可以凭空创建一个流或者是根据其它数据形式创建一个流. Observable的构造函数可以直接创建一个数据流,比如: const $source=ne ...

  7. RxJS中高阶操作符的全面讲解:switchMap,mergeMap,concatMap,exhaustMap

    RxJS中高阶映射操作符的全面讲解:switchMap, mergeMap, concatMap (and exhaustMap) 原文链接:https://blog.angular-universi ...

  8. angular环境搭建时的坑

    安装angular环境踩过一些坑,最终还是把工程跑起来了,这里描述一下我的步骤,不排除有些步骤是多余的,希望能对遇到同样问题的小伙伴有帮助. 下载最新版node.js. 安装node,安装过程一路点下 ...

  9. Python 创建本地服务器环境生成二维码

    一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...

随机推荐

  1. js 只允许输入数字

    <input id="credit" type="text" class="nummber" onkeyup="value= ...

  2. VSFTP 配置虚拟用户

    虚拟用户的特点是只能访问服务器为其提供的FTP服务,而不能访问系统的其它资源.所以,如果想让用户对FTP服务器站内具有写权限,但又不允许访问系统其它资源,可以使用虚拟用户来提高系统的安全性. 在VSF ...

  3. git-搭建企业git服务器

    1.安装 yum install git 2.增加用户 useradd git -d /home/git -g git 3.查看公钥鉴权文件是否存在  cat /home/git/.ssh/autho ...

  4. 使用ubuntu远程连接windows, Connect to a Windows PC from Ubuntu via Remote Desktop Connection

    from: https://www.digitalcitizen.life/connecting-windows-remote-desktop-ubuntu NOTE: This tutorial w ...

  5. javascript:FileReader对象(读取文件)

    FileReader对象 1.检测浏览器对FileReader的支持 1 if(window.FileReader) { 2 var fr = new FileReader(); 3 // add y ...

  6. 2.Geany安装后编译器配置

    生成 --> 设置生成命令 -->  Compile & Execute : C:\Users\29742\AppData\Local\Programs\Python\Python ...

  7. android Button、TabLayout英文自动改小写为大写的问题

    如果是Button自动大写问题,直接设置Button的 textAllCaps="false" 即可: 如果是TabLayout出现全大写问题,先在style.xml加入属性: & ...

  8. HttpURLConnection类的使用

    此类以获取天气的一个api地址为例: package javaexcjs; import java.io.BufferedReader; import java.io.OutputStreamWrit ...

  9. 阿里支付宝java接口

    网上关于Java支付宝接口的文章很多,都大同小异,但是具体到代码中,还是不太一样,对于以前没有调试的新手来说还是很费解的,这是通过调试认为比较有用的版本,贴在这里供大家参考. 1.从本站提交到支付宝: ...

  10. beta分布 java代码

    public class BetaDistributionActivity { /** * @param alpha: eg. click * @param beta : eg. pv - click ...