Angular2：从服务器加载异步数据

Question

I want to load data from server in my Angular app . But data request is async , and I can't get data properly. First I pass url parameter. Based on parameter, I load data from ngOnInit() , but data is not loading properly. I've googling hour, but no solution. My code is given below:

Service

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Author} from './author';

@Injectable()
export class AuthorService {
    private headers = new Headers({
       'Content-Type': 'application/json'
    });
    private authorUrl =  'api/author';
    constructor(private http:Http) { }
    getAuthor(authorId : String):Promise<Author> {
       return this.http.get(this.authorUrl + '/get/'+ authorId )
        .toPromise()
        .then(res => res.json().data as Author)
        .catch(this.handleError)
   }
}

Component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AuthorService } from '../author/author.service';
import { Author } from '../author/author';

@Component({
   selector: 'book-list',
   templateUrl: './book.component.html'
})

export class BookComponent implements OnInit {

    constructor(private route: ActivatedRoute, private authorService: AuthorService) { }

    fetchAuthor( authorId ): Promise<Author> {
        return  this.authorService.getAuthor( authorId )
    }

    ngOnInit() : void {
        this.fetchAuthor( this.id ).then( (author) =>  {
            this.author = author;  // here value is avaliab
        } );

        // here value is undefined
        console.log('author data : ', this.author);

        /*
        // I also have tried this
        this.authorService
          .getAuthor( this.id )
          .then(author => {
             this.author = author;
             console.log(this.author); // here value available
         });
         console.log(this.author); // here value is not available
        */
   };
}

HTML

  <div class="form-group">
      <label for="exampleInputEmail1">Initial</label>
          <!-- this code causes error -->
          <p> {{author.initial}} </p>
   </div>

Any suggestion? Thanks in Advance.

Answer 1

Try this safe operator/elvis operator (?) :

  <div class="form-group">
      <label for="exampleInputEmail1">Initial</label>
          <!-- this code causes error -->
          <p> {{author?.initial}} </p>
   </div>

by using elevis operator (?) [also called safe navigation operator ] it will prevent angular to throw error , beneficial in case where data is coming asynchronously like in your case

Here is detailed information about this

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator

Answer 2

You can use the safe operator to check if the data is available then bind it, it will prevent angular to throw error ,

   <label for="exampleInputEmail1">Initial</label>          
      <p> {{author?.initial}} </p>
   </div>