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

一 take操作符

只发出源 Observable 最初发出的的N个值 (N = count)。 如果源发出值的数量小于 count 的话,那么它的所有值都将发出。然后它便完成,无论源 Observable 是否完成。

import { Component, OnInit } from ‘@angular/core‘;
import { range } from ‘rxjs/observable/range‘;
import { take } from ‘rxjs/operators/take‘;

@Component({
  selector: ‘app-filter‘,
  templateUrl: ‘./filter.component.html‘,
  styleUrls: [‘./filter.component.css‘]
})
export class FilterComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    range(100, 10)
      .pipe(take(5))
      .subscribe(val => {
        console.log(val);
      });
  }

}

原文地址:https://www.cnblogs.com/sea-breeze/p/8969237.html

时间: 2024-10-12 14:25:26

RxJS之过滤操作符 ( Angular环境 )的相关文章

dtGrid插件集成到Angular环境实现表格化数据展现

00没有抱怨的世界 周末效率好低,两天没更了,看看这看看那,装了个win10发现触摸板驱动不适配,然后找了好久都不行,23333. AngularJS用的时间很短,高级的用法有点吃不消了,$digest,$watch这种东西的原理看起来好吃力啊,后面还有大把大把的需求要用这个来做了#¥@%#@! 01.先看看效果吧 这里的所有数据相关信息都是直接配置到DB的,作为元数据,包括搜索条件,显示方式,数据过滤器等等,配置目前只实现了几个,加的配置越多,能适用的业务就越广.数据本身也是在DB的,在后台简

Angular环境搭建

工具的安装 首先需要安装node,直接在官网下载node,然后一直下一步安装完即可,在安装node的时候自带了npm包管理工具 然后安装Angular CLI,使用npm命令安装输入以下命令 npm install -g @angular/cli 使用ng -v 查看版本是多少,有结果说明安装成功 安装WebStorm 集成开发环境,直接去webStrom官网下载,一直下一步即可,最后激活的时候选择License server 输入:http://idea.iteblog.com/key.php

Angular环境准备和Angular cli

Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安装Node.js和npm,请安装他们 (这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了) npm install -g cnpm --registry=https://registry.npm.taobao.org 然后我们可以通过node -v和cnpm -v来分别

RxJava系列4(过滤操作符)

前面一篇文章中我们介绍了转换类操作符,那么这一章我们就来介绍下过滤类的操作符.顾名思义,这类operators主要用于对事件数据的筛选过滤,只返回满足我们条件的数据.过滤类操作符主要包含: Filter Take TakeLast TakeUntil Skip SkipLast ElementAt Debounce Distinct DistinctUntilChanged First Last等等. Filter filter(Func1)用来过滤观测序列中我们不想要的值,只返回满足条件的值,

angular环境安装与配置

1.安装npm和nodejs,下载地址:https://nodejs.org/en/download/ node -v npm -v 2.配置淘宝代理,下载node_modules npm config set registry https://registry.npm.taobao.org npm config get registry 3.通过cnpm使用npm.你可以使用cpnm命令代替大部分的npm命令. npm install -g cnpm --registry=https://re

windows7或10 angular 环境搭建

1.nodejs 安装 https://nodejs.org/en/ 此网址下载相应版本 2.设置 npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global 3.安装typescript https://www.typescriptlang.org/#download-links 这儿安装就 4.npm i

angular环境 火狐浏览器里new Date() 报错Invalid Date

如图所示 我们有一个月结单的功能  只展示年和月 并且分语言环境 首先我们有一个DateUtils的组件 对外提供方法 然后我发现在方法里的 new Date(str)这一步 如果只提供年和月 在火狐下会报 Invalid Date 但在chorme浏览器下安然无恙 于是分别去两个浏览器里去打debugger对比 发现chorme会在只提供年月的时候 自动补充[日]为'01' 既然问题发现了 那就非常好解决了 在方法里填充上[日]为'01' 然后在展示的时候切掉[日]的展示 另外火狐下 要注意:

RxJS过滤数据流操作符学习 (Filtering Operators)

1. 过滤类操作符的模式 很多时候,上游Observable对象吐出的数据,并不是下游关心的,这个时候我们需要把不需要的数据,过滤掉.在RxJS中,提供了这类过滤操作符来实现这种功能. 过滤类操作符最基本的功能就是对一个给定的数据流中的每个数据判断是否满足某个条件,如果满足就传递给下游,如果不满足就抛弃. 判断一个数据是否有资格进入下游,是根据 "判定函数"的返回值, true代表可以进入下游,否则就会被淘汰. 有的过滤类操作符还可以接受一个函数参数"结果选择器",

Rxjs 操作符

1. javascript解决异步编程方案 解决javascript异步编程方案有两种,一种是promise对象形式,还有一种是是Rxjs库形式,Rxjs相对于Promise来说,有好多Promise没有的特性和功能,使用起来更便捷简单: 2. Rxjs 简单介绍 Rxjs 是Reactive Extensions JavaScript 的简写,响应式异步编程:同Promise对象一样,是解决JS异步编程的一种解决方案: 3. Rxjs使用 1. Rxjs是一个库,需要使用npm进行安装: //