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. 计时器(Chronometer)的使用

    安卓提供了一个计时器组件:Chronometer,该组件extends TextView,因此都会显示一段文本,但是它显示的时间是从某个起始时间开始过去了多少时间,它只提供了android:forma ...

  2. tomcat中有关配置文件的说明

    在以往的tomcat使用中本人一直都没有注意到tomcat的conf目录下配置文件的作用,都是"拿来主义"的思想,从未深究.但是最近遇到很多有关tomcat配置的问题,很是头大,所 ...

  3. NOI 191钉子和小球.cpp

    #include<iostream> #include<cstdio> #include<cstring> using namespace std; ][]; in ...

  4. Yii2的相关学习记录,自定义gii模板和引用vendor中的js、css(四)

    上文中后台模板框架已经搭建起来了,但还是有些不协调,像是有两个User标题,或者我们想自己在gii生成时添加或删除些公用的东西.这就需要我们定义自己的gii模板. 我们以CRUD的模板为例,默认的gi ...

  5. C++学习笔记6——类的多态

    简介: 同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果.在运行时,可以通过指向基类的指针,来调用实现派生类中的方法. 虚函数: 在某基类中声明为virtual并在一个或多个派生类中被重 ...

  6. JS 输出与变量

    1. JS的输出 innerHTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  7. 点击Textbox 给日历控件赋值

    1.前台代码: <asp:TextBox ID="TextBox1" runat="server" onfocus="return show() ...

  8. unwrap_uvw 笔记

    <integer><Unwrap_UVW>.numberVerticesByNode <node>node --返回图顶点的对应于给定节点的Unwrap_UVW点总 ...

  9. C++学习笔记--Season 1

    #include <iostream> //预处理 注意:iostream不带.h int main() { std::cout << "Aloha World&qu ...

  10. Unity脚本获取内存和FPS

    using System; using System.Collections.Generic; using UnityEngine; public class Debugger : MonoBehav ...