zoukankan      html  css  js  c++  java
  • [Angular 2] Mapping Streams to Values to Affect State

    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(1000).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() + 1);
                    }
    
                    if(curr === "hour"){
                        date.setHours(date.getHours() +1 );
                    }
    
                    return date;
                });
        }
    }
    
    bootstrap(App);
  • 相关阅读:
    MYSQL查询表信息
    认识WCF
    asp.net mvc 模型验证注解,表单提交
    asp.net mvc 防止开放重定向
    asp.net webForm登录授权
    C# 压缩文件与字节互转
    C#将字节流加密解密
    获取数据库表详细信息、存储过程、视图、的sql
    Mvc4学习笔记一(Ajax.ActionLink)
    java开发之提高java和mysql代码性能和质量
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5436090.html
Copyright © 2011-2022 走看看