zoukankan      html  css  js  c++  java
  • [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 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());
      }
    }
  • 相关阅读:
    LG2664 树上游戏
    「NOI2007」 货币兑换
    「NOI2012」骑行川藏
    LG4721 【模板】分治 FFT
    LG4783 【模板】矩阵求逆
    test20181019 B君的第二题
    LOJ129 Lyndon 分解
    「NOI2017」泳池
    LG4723 【模板】常系数线性递推
    「AHOI / HNOI2017」礼物
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7024066.html
Copyright © 2011-2022 走看看