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

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 秒后更改

display

中的

style

值：

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

仅此而已。谢谢上帝=）

Answer 3

对这篇文章没有帮助，但如果你使用 ngModel 作为 selectButton 你应该让它为空

this.http
      .get<any>(AppConstants.BASE_URL_API + "/api/sizes")
      .subscribe((response) => {
        this.shoeSizes = response;
        this.shoeSizes.forEach((brand) => this.paymentOptions.push({ name: brand.name, value: brand.id }));
        this.selectedSizes = null
      });

html

<p-selectButton [options]="brandOptions" [(ngModel)]="selectedBrand" optionLabel="label" (onOptionClick)="calle()" optionValue="value">
      <ng-template let-brand pTemplate="item">
                        <div class="custom-option">
                            <span>{{brand.label}}</span>
                        </div>
      </ng-template>
</p-selectButton>