rendre html après le processus d'achèvement du composant dans angular2

Question

J'appelle un api dans mon composant d'application après avoir obtenu la réponse que je peux décider quelle div est à montrer et quelle div est à cacher. Mais il rend le html avant l'achèvement du processus de composant. Voici l'exemple de code.

user.service.ts

import { Injectable } from '@angular/core'; 
import {Http,Headers, RequestOptions, Response, URLSearchParams} from '@angular/http'; 

@Injectable() 
export class UserService { 

    private static isUserLoggedIn: boolean = false; 
    private userData: any; 
    constructor(private http: Http) { } 

    public isLoggedIn() { 
    return UserService.isUserLoggedIn; 
    } 

    public getUserData() { 
    return this.userData; 
    } 

    setUserData() { 

    var url = 'http://api.example.in/user/logincheck'; 
    this.http 
     .get(url) 
     .map(response => response.json()) 
     .subscribe(
     (data) => { 
     this.userData = data; 
     if (typeof this.userData.id != 'undefined' && this.userData.id > 0) { 
      UserService.isUserLoggedIn = true; 
     } 
     }, 
     (err) => { throw err; } 
    ); 
    } 

} 

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { UserService } from './services/user/user.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [UserService], 
}) 
export class AppComponent { 
    constructor(private userService: UserService) { 
    this.userLoggedInCheck(); 
    } 

    ngOnInit() { 

    } 

    userLoggedInCheck() { 
    this.userService.setUserData(); 
    } 
} 

Je veux ici charger html après complète de la fonction userLoggedInCheck appelée.

Answer 1

renvoyer une valeur true de userLoggedInCheck si les conditions nécessaires sont remplies et de l'affecter à une variable dans le fichier app.component.ts. Dans le fichier html, placez le contenu dans un * ngIf basé sur la variable de retour de la fonction.

par ex.

userLoggedInCheck() { 
    this.showHtml = this.userService.setUserData(); 
    } 

et en html

<div *ngIf="showHtml"> 
    ....... // code 
</div>