Wie kann man vermeiden, dass die Benutzeroberfläche vor den Daten in Angular 2 + PrimeNG geladen wird?

Question

Ich bin neu in Angular 2 und ich benutze auch PrimeNG.

Nur um zu veranschaulichen, was passiert, habe ich die Registerkarte "Configurações" dupliziert, wie Sie auf den Bildern sehen können.

Die zwei Registerkarten haben genau den gleichen Code, aber die Verhaltensweisen sind unterschiedlich. Die erste hat die Toggles nicht korrekt geladen. Der zweite funktioniert gut.

Mein HTML:

<p-tabView orientation="left"> 
    <p-tabPanel header="Administrador"> 
     <p-growl [value]="msgs"></p-growl> 
     <p-dataTable [value]="tblColabAdminList"> 
      <p-column field="snomatrcompl" header="Matrícula"></p-column> 
      <p-column field="nflativo" header="Status" styleClass="col-button"> 
       <template let-tblColabAdmin="rowData" pTemplate type="body"> 
        <p-inputSwitch onLabel="ativo" offLabel="inativo" (click)="selectAdmin(tblColabAdmin)" [(ngModel)]="tblColabAdmin.nflativo"></p-inputSwitch> 
       </template> 
      </p-column> 
     </p-dataTable> 
    </p-tabPanel> 
</p-tabView> 

Und es ist mein Typoskript:

import { Component, OnInit } from '@angular/core'; 
import { ConfigService } from './config/configService'; 
import { TblColabAdmin } from './config/TblColabAdmin'; 
import { Message } from 'primeng/primeng'; 

@Component({ 
    templateUrl: 'app/app.config.html', 
    selector: 'config-app', 
    providers: [ConfigService] 
}) 
export class AppConfig implements OnInit { 
    private errorMessage: string; 

    tblColabAdminList: TblColabAdmin[]; 

    msgs: Message[] = []; 

    constructor(
     private configService: ConfigService) { 
    } 

    ngOnInit() { 
     this.getConfig(); 
    } 

    getConfig() { 
     this.configService.getTblColabAdmin().subscribe(
      tblColabAdminList => this.tblColabAdminList = tblColabAdminList, 
      error => this.errorMessage = <any>error 
     ); 
    } 

    selectAdmin(tblColabAdmin: TblColabAdmin) { 
     this.msgs = []; 
     this.msgs.push({ severity: 'info', summary: 'Administrador selecionado', detail: 'Matrícula: ' + tblColabAdmin.snomatrcompl }); 
    } 
} 

Ich denke, dass in der ersten Registerkarte die Benutzeroberfläche, bevor das geladen wird Daten.

Aber warum passiert und wie löst man das? Vielen Dank!

Answer 1

Eine Woche später fand ich endlich eine Lösung. Ich weiß nicht, ob es der beste Ansatz ist, aber funktioniert gut:

Zuerst habe ich <div id="tab" style="display:none"> zu meinem HTML hinzugefügt:

<div id="tab" style="display:none"> 
    <p-tabView orientation="left"> 
    ... 
    </p-tabView> 
</div> 

Zweitens Ich habe ein setTimeout in meinem Typoskript display Wert in den style zu ändern nach 1 Sekunde:

... 
this.configService.getTblColabAdmin().subscribe(
    tblColabAdminList => this.tblColabAdminList = tblColabAdminList, 
    error => this.errorMessage = <any>error, 
    () => { 
     setTimeout(() => { 
      document.getElementById("tab").setAttribute("style", "display:true"); 
     }, 1000); 
    } 
); 
... 

Und das ist alles. Danke, Gott =)

Answer 2

Sie können in Ihrer Angular-Komponente ngAfterViewInit() hören.

import { Component,AfterViewInit} from '@angular/core' 

@Component({ 
    templateUrl: 'app/app.config.html', 
    selector: 'config-app', 
}) 
export class ContentComponent implements AfterViewInit { 

    ngAfterViewInit(){ 
     ... do stuff here 
    } 
} 

Sollte dies nicht helfen, haben Sie ein Ereignis in Ihrer Root-Komponente auf ngOnInit() erhöhen können und es in Ihrer Komponente hören.

@Component(selector: 'app-element') 
@View(
    templateUrl: 'app_element.html', 
) 
class AppElement implements OnInit { 
    ElementRef elementRef; 
    AppElement(this.elementRef); 

    void ngOnInit() { 
     DOM.dispatchEvent(elementRef.nativeElement, new CustomEvent('angular-ready')); 
    } 
}