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. iOS 上传项目常见问题

    一. Archive项目 时,出现"Your build settings specify a provisioning profile with the UUID "XXX&qu ...

  2. php 与 ajax 获取123的案例

    同事问我,咱们从数据库里面获取数据,用ajax的方式展示到前台页面.啥都不说了,动手写个案例吧. 1,建立一个页面: <!DOCTYPE html PUBLIC "-//W3C//DT ...

  3. jquery学习(2)toggle

    $(function(){ $("#panel h5.head").hover(function(){ //交替执行该函数 $(this).next().show(); },fun ...

  4. python:UnboundLocalError: local variable 'xxx' referenced before assignment

    近来一直都在学习python语言,偶然在伯乐在线看到2017年京东C/C++的面试题.就打算用python+ST3 IDE顺便敲下面试题代码. 原题 C语言: #include <stdio.h ...

  5. HDU 2955(01背包问题)

    M - 01背包 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Descript ...

  6. UI基础 - UILabel

    //根据文字获取size - (CGSize)getSizeWithstring:(NSString *)string { CGSize maxSize = CGSizeMake(320, 320); ...

  7. 转:Zend Framework 2.0 分析

    文章来自于:http://bbs.phpchina.com/thread-268362-1-1.html ZF2已经发布,与ZF1相比,MVC这一模块内部的实现机制可谓大相径庭,许多用过ZF1的PHP ...

  8. (未解决)问题记录ionic android 签名之后安装到手机上点击运行出现闪退,不签名运行正常

    Log日志如下: - ::): error opening trace ) - ::): FATAL EXCEPTION: main - ::): java.lang.RuntimeException ...

  9. Windows 7 mklink命令详解

    mklink是Windows 7下的一个类似于linux下In的命令,其作用是在NTFS文件系统中创建文件或目录的链接(类似于桌面快捷方式).如果加以利用其发挥的作用是非常的大的,不仅可以帮助我们节省 ...

  10. 关于索引degree设置的问题

    --并行查询 可以使用并行查询的情况 1. Full table scans, full partition scans, and fast full index scans 2. Index ful ...