typescript - Visa inte .html-komponenten förrän alla funktioner/data har laddats. Angular 2

Jag har två metoder inuti ngOnInit som visas här:

   ngOnInit() {
    this.getBugId(); // Get Id from URL 
    this.getBugInformation(); // Get the bug information from firebase, the bug that matches the ID passed in
}

getBugId(): hämtar i princip Id från URL:en och tilldelar det till en lokal variabel.

getBugInformation(): anropar en tjänst, ansluter till Firebase och hämtar en enskild post som matchar det bugId jag har skickat in, och fyller en klass som heter Bug, detta fungerar.

// Anropar en metod på en tjänst som returnerar ett löfte.

 getBugInformation() {
    this.bugService
        .getBug3(this.bugId)
        .then(bug => {
            this.bugDetail = bug;
            this.configureForm();
        });
}

Problemet jag har är this.configureForm(); detta fyller i princip fälten i FormControls som sedan visas på .html-sidan, problemet är att min .html-sida visas innan funktionerna har slutförts vilket resulterar i att formGroup förväntar sig en FormGroup-instans. Vänligen skicka in en. visas i konsolen som ett fel, min fråga är. Hur kan jag förhindra att .html-sidan visas tills,

this.getBugInformation(); har slutfört this.configureForm(); har slutfört.

Tack på förhand

Svar #1

Du anropar två funktioner. För att lösa detta problem bör du skapa en boolean

display: boolean = false;

nu i funktionen this.configureForm(); när ditt formulär är klart, ställ in this.display=true;

i din html-del, placera alla dina formulär som du vill visa senare i ett div-block med *ngIf-strukturdirektiv på detta sätt

<div *ngIf="display">
...... your code here 
</div>

tack.