While you have multiple streams flowing into your scan operator, you'll need to map each stream to the specific values you need to update your state the way that you want. This lesson covers using the map operator to determine what the click and interval should do when the state is updated.

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/scan';
import 'rxjs/add/operator/startWith';
import {Subject} from 'rxjs/Subject'; @Component({
selector: 'app',
template: `
<button (click)="click$.next()">Add one second</button>
<h1>{{clock | async | date: 'yMMMMEEEEdjms'}}</h1>
`
}) class App { click$ = new Subject();
clock;
constructor(){ this.clock = Observable.merge(
Observable.interval().mapTo('second'),
this.click$.mapTo('hour')
)
.startWith(new Date())
.scan( (acc: Date, curr: string) => {
// acc: new Date() passed from startWIth
// curr: string, passed from mapTo
console.log(acc, curr);
const date: Date = new Date(acc.getTime());
if(curr === "second"){
date.setSeconds(date.getSeconds() + );
} if(curr === "hour"){
date.setHours(date.getHours() + );
} return date;
});
}
} bootstrap(App);

[Angular 2] Mapping Streams to Values to Affect State的更多相关文章

  1. Know How To Use Check Box Mapping Of Other Values Property In Oracle Forms

    Check Box Mapping of Other Values specifies how any fetched or assigned value that is not one of the ...

  2. [Angular 2] Passing Template Input Values to Reducers

    Angular 2 allows you to pass values from inputs simply by referencing them in the template and passi ...

  3. [Functional Programming] Read and Transform Values from a State ADT’s State (get)

    Many times we need to access and transform state, either in part or in full, to be used when calcula ...

  4. BETTER SUPPORT FOR FUNCTIONAL PROGRAMMING IN ANGULAR 2

    In this blog post I will talk about the changes coming in Angular 2 that will improve its support fo ...

  5. Angular之 Scope和 Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  6. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  7. ocLazyLoad angular 按需加载

    ionic 框架 1.引用 index.html 加载 <script type="text/javascript" src="lib/oclazyload/ocL ...

  8. angular --- s3core移动端项目(二)

    product-ctrl.js angular.modules('myApp').controller('ProductCtrl',['$scope','$rootScope','$timeout', ...

  9. CHANGE DETECTION IN ANGULAR 2

    In this article I will talk in depth about the Angular 2 change detection system. HIGH-LEVEL OVERVIE ...

随机推荐

  1. SQL Server主键自动生成_表and存储过程

    主键表: CREATE TABLE [dbo].[KEYCODE]( [KeyName] [varchar](12) NOT NULL, [KeyTableName] [varchar](40) NU ...

  2. centos6 x86 安装 oracle 11g2r 日志

    一.安装centos 6.5 二.安装ora所需的库 三.修改centos内核 四.建用户组和目录结构等 五.安装ora11g2r 六.安装sqlplus的翻页程序和help补丁 七.自启动脚本 八. ...

  3. JS字符串常用方法

      // 来自 http://www.runoob.com/js/js-strings.html   var str01 = "odd open xboxone" , str02 ...

  4. A simple stack

    // simple stack.cpp : 定义控制台应用程序的入口点.// #include "stdafx.h"#include<iostream>using na ...

  5. 【COGS495】窗口

    [问题描述] 给你一个长度为N的数组,一个长为K的滑动的窗体从最左移至最右端,你只能见到窗口的K个数,每次窗体向右移动一位,如下表: Window position Min value Max val ...

  6. 花非花-记一次linux上运行时报找不到库函数错误

    简介: --->:表示依赖 exe ---> a.so ---> utility.so 问题描述: exe运行起来报a.so中的函数f未定义. 解决过程: 一·nm a.so nm ...

  7. Maven 安装记

    java初学者 昨天通m2e插件把maven项目导入eclipse的时候各种bug,看了各家技术博客,决定安装maven好好了解下. 安装maven也是一波三折的,先是看各种安装指导,结果环境变量都没 ...

  8. grails通过findBy或findBy查找的结果集进行排序

    原文:http://grails.org/doc/2.3.x/ref/Domain%20Classes/list.html list Purpose Lists instances of the do ...

  9. Win7 64位 php-5.5.13+Apache 2.4.9+mysql-5.6.19 配置

    一 :准备阶段 1:php php-5.5.13下载链接:http://windows.php.net/downloads/releases/php-5.5.13-Win32-VC11-x64.zip ...

  10. HTTP协议学习-03

    浏览器访问一个网站,的原理图