加载数据之前显示的Primeng空消息

Question

我正在使用Primeng表显示数据，并添加了空消息模板如下：

<ng-template pTemplate="emptymessage">
   <tr>
     <td>
         No records found
      </td>
    </tr>
 </ng-template>

我正在使用懒惰加载，因为从服务器获取数据。我添加了一个加载标志，当HTTP调用完成后，该标志已更改。代码如下：

this.myService
    .myHttpCallFunction(params)
    .pipe(
        finalize(() => this.loading = false)
    )
    .subscribe(
        (result: JsendResponse) => this.data = result.data,
         errors => this.errors = errors
    );

我将loading标志传递到表格，看起来如下：

 <p-table [value]="data?.data" [columns]="settings.columns" [lazy]="true" [loading]="loading">

该表是从共享的组合加载的，并且将数据接受为输入参数。因此，共享组件中数据的声明就像

@Input()
set data(data) {
   if (data) {
            this._data = data;
            this.total = data.meta.pagination.total;
        }
}
get data(){
    return this._data;
}

现在，该表将首先显示No Records Found一秒钟，然后加载数据。我假设这是因为在收到HTTP响应之前加载了表。但是我该如何解决？

Answer 1

您可以通过在p-table组件模板上设置[加载]属性来避免此问题。

<p-table [value]="data" [loading]="loading">
    <ng-template pTemplate="header">
        <tr>
            <th>Colmun</th>
        </tr>
    </ng-template>
    
    <ng-template pTemplate="body" let-c>
        <tr>
            <td>{{c.value}}</td>
        </tr>
    </ng-template>
    
    <ng-template pTemplate="emptymessage" let-c>
        <tr>
            <td [attr.colspan]="c.length">
                No records found
            </td>
        </tr>
    </ng-template>
</p-table>

和您的component.ts文件：

loading: boolean = true;

最后，当数据获取时，将其设置为false：

ngOnInit() {
    setTimeout(() => {
        // Fetch data here...
        this.loading = false;
    }, 1000);
}

这样，您将不会在加载数据之前收到空消息。