[Angular 2] Async Http

Posted 2020-07-03 Answer1215

Async Pipe:

The Asynce pipe receive a Promise or Observable as  input and subscribes to the input, evetually emitting the value(s) changes arrive.

 

In the demo, the logic is fom the list component, we ask service to get Heros by calling Start War API, on the service side, we only return array of heros with observalbe type:

    getHeros(){
        return this._http.get(‘http://swapi.co/api/people‘)
            .map( (res: Response) => <Hero[]>res.json().results)
            .catch(this.handleError);
    }

 ...

export class Hero{
    constructor(public name: string){}
}

 

Here <Hero[]>, we use Typescript to convert the raw json data to Hero[]. The same as you new Hero().

 

For the list, we assign the return value from service to this.heros , so it is a list of Hero with Observable type, then we apply async pipe to the html.

    heros: Observable<Hero[]>;

    getHeros(){
        this.heros = this.heroService.getHeros();
    }

        <ul>
            <li *ngFor="#hero of heros | async">
                {{hero.name}}
            </li>
        </ul>