Angular 2 templates use a special Async pipe to be able to render out Observables. This lesson covers the syntax used to create an Observable in Angular 2 and then to render it out in the template.

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval' @Component({
selector: 'app',
template: `<h1>{{clock | async}}</h1>`
}) class App {
clock = Observable.interval();
} bootstrap(App);

[Angular 2] Rendering an Observable with the Async Pipe的更多相关文章

  1. [Angular 2] Rendering an Observable Date with the Async and Date Pipes

    Instead of simply pushing numbers on a timer into the template, now we'll move on to pushing actual ...

  2. [Angular 2] Passing Observables into Components with Async Pipe

    The components inside of your container components can easily accept Observables. You simply define ...

  3. [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword

    Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...

  4. [Angular 2] Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

    Each time you use the Async Pipe, you create a new subscription to the stream in the template. This ...

  5. [Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

    The network may be unreliable and loading data may take time. Thus it is important to give the user ...

  6. [Angular] Pluck value from Observable

    export class MailFolderComponent implements OnInit{ title: Observable<string>; messages: Obser ...

  7. Angular 学习笔记 ( timezone + moment + material date-picker + date pipe + asp.net core )

    参考 : https://stackoverflow.com/questions/29979609/time-conversion-with-timezoneinfo-for-past-years h ...

  8. [Angular 2] Filter items with a custom search Pipe in Angular 2

    This lessons implements the Search Pipe with a new SearchBox component so you can search through eac ...

  9. [Angular 2] Handle Reactive Async opreations in Service

    When you use ngrx/store and you want to fire a service request. When it sucessfully return the respo ...

随机推荐

  1. 关于Jquery.Data()和HTML标签的data-*属性

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  2. 抓取锁的sql语句-第四次修改

    --完成情况   变量V_BLOCKING_SID 用来动态抓取 产生锁的会话id,输出参数没有任何问题,但是执行报错  标识符无效! CREATE OR REPLACE PROCEDURE SOLV ...

  3. 安卓开发入门之activity

    安卓开发主要用到的是java语言,对于一个activity,自己写的程序可以继承至Activity,该Activity先会运行一个叫 onCreat()的类,可以在其中申明一些初始化的函数等,这个函数 ...

  4. C# 多线程编程 ThreadStart ParameterizedThreadStart

    原文地址:http://club.topsage.com/thread-657023-1-1.html 在实例化Thread的实例,需要提供一个委托,在实例化这个委托时所用到的参数是线程将来启动时要运 ...

  5. thinkphp整合系列之支付宝RSA加密方式

    thinkphp整合系列之支付宝RSA加密方式上篇博客写的是MD5加密方式:thinkphp整合系列之支付宝MD5加密方式扫码支付http://baijunyao.com/article/75 但是呢 ...

  6. HTml <meta>标签的使用(重要)

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 1.设置网页字符编码 <meta http-equiv=&q ...

  7. CSS 字体描边

    -webkit-text-stroke: 2px #; text-stroke: 2px #; -o-text-stroke: 2px #;

  8. centos 安装 mongo3.0

    官方网站传贴,每次去翻doc,麻烦 vi  /etc/yum.repos.d/mongodb-org-3.0.repo [mongodb-org-3.0]name=MongoDB Repository ...

  9. Javascript中的onclick事件

    示例: <script type="text/javascript"> function onSubmit() { alert("保存数据"); } ...

  10. 002 Spring Restful案例

    1:工程结构 需要注意的是需要额外导入以下三个包: jackson-annotations-2.6.1.jar jackson-core-2.6.1.jar jackson-databind-2.6. ...