Как избежать загрузки пользовательского интерфейса перед данными в Angular 2 + PrimeNG?

Question

Я новичок в Angular 2, и я тоже использую PrimeNG.

Просто чтобы показать, что происходит, я дублировал вкладку «Configurações», как вы можете видеть на изображениях.

Эти две вкладки имеют точно такой же код, но поведение отличается. Первый не имеет правильно загруженных переключателей. Второй работает отлично.

Мой 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> 

И это мой Машинопись:

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 }); 
    } 
} 

Я думаю, что в первой вкладке интерфейс загружается до данные.

Но почему это происходит и как это решить? Благодаря!

Answer 1

Через неделю я наконец нашел решение. Я не знаю, если это лучший подход, но работает хорошо:

Во-первых, я добавил <div id="tab" style="display:none"> в мой HTML:

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

Во-вторых, я добавил setTimeout в моем машинопись изменить display значение в style после 1 секунды:

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

И все. Спасибо, Бог =)

Answer 2

Вы можете слушать ngAfterViewInit() в своем угловом компоненте.

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

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

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

Если это не помогло, вы можете вызвать событие в корневой компонент на ngOnInit() и слушать его в компоненте.

@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')); 
    } 
}