如何避免 UI 在 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>

这是我的 TypeScript：

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

我认为在第一个选项卡中 UI 在数据之前加载。

但为什么会这样，如何解决？谢谢！

Answer 1

您可以在 Angular 组件中收听 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'));
     }
}

Answer 2

一周后，我终于找到了解决办法。我不知道这是否是最好的方法，但效果很好：

首先，我将 <div id="tab" style="display:none"> 添加到我的 HTML:

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

其次，我在 TypeScript 中添加了一个 setTimeout 以在 1 秒后更改 style 中的 display 值：

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

仅此而已。谢谢大神=)

如何避免 UI 在 Angular 2 + PrimeNG 中的数据之前加载？

How to avoid UI being loaded before the data in Angular 2 + PrimeNG?

observable

primeng

angular