码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-06-16 10:10:05      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:ica   person   round   rom   ant   bind   back   rod   mat   

Angular allows us to conveniently use the async pipe to automatically register to RxJS observables and render the result into the template once the request succeeds. This has some drawbacks, especially if we want to bind the same data in multiple parts of the template. In this lesson we will learn how we can leverage the async pipe and the as keyword introduced in Angular version 4.0.0 to circumvent such drawbacks.

 

import { Component, OnInit } from ‘@angular/core‘;
import { Http } from ‘@angular/http‘;
import ‘rxjs/add/operator/map‘;

@Component({
  selector: ‘person-detail‘,
  template: `
    <h1>Person Detail</h1>

    <div *ngIf="person$ | async as person">
      Name: {{ person.name }} <br />
      Twitter: {{ person.twitter }}
    </div>
  `
})
export class PersonDetailComponent implements OnInit {
  person$;

  constructor(private http: Http) { }

  ngOnInit() {
    this.person$ = this.http
        .get(‘./person.json‘)
        .map(res => res.json());
  }
}

 

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

标签:ica   person   round   rom   ant   bind   back   rod   mat   

原文地址:http://www.cnblogs.com/Answer1215/p/7024066.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!