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

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

首先，我在我的HTML中添加了<div id="tab" style="display:none">：

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

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

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

就是这样。谢谢，上帝=）

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

2 个答案: