在加载数据时使用语义 ui 显示数据加载状态，而不是使用 PrimeNg 显示 "No records found"

Question

我在 PrimeNg 的帮助下显示来自 angular 2 应用程序的表格数据。我使用的 PrimeNg 版本是 2.0.4，由于配置限制无法升级。该项目还使用了语义 ui.

当我单击 link 以显示 table 时，它显示 "No records found"，即使数据仍在 table 上加载并且最终显示数据数据加载完成后，在 table 中向上。

我想避免显示 "No records found" ，而是想在加载数据时显示语义 ui 加载器（微调器），然后在整个数据加载完成后显示 PrimeNg DataTable。

我期待关于如何将这两者联系起来的一些提示。是否有标记数据加载到 ngprime table 中的属性，并且该属性可用于决定语义 ui 加载器是否旋转。

----------------------------编辑---------------- --------------------------

嗨

我进行了以下更改并且部分有效。在数据加载阶段显示时，微调器的一部分被剪掉了。即使我将它的大小增加到中等，它的行为也没有什么不同。

<div class="ui segment">
    <div class="ui active dimmer" *ngIf="loading">
       <div class="ui medium text loader">Loading table</div>
    </div>

    <p-dataTable  *ngIf="!loading">
         ..........
         ..........
    </p-dataTable>
</div>

谢谢

Answer 1

您可以在 component.ts 文件中添加一个标志 loading:boolean = true; 当您将数据转换标志设置为 false this.loading = false; 然后您只需在数据表组件上使用 ngIf 指令 *ngIf="!loading" 和 *ngIf="loading" 在你的 semantic-ui 微调器中。

在加载数据时使用语义 ui 显示数据加载状态，而不是使用 PrimeNg 显示 "No records found"

Show Data Loading status with semantic ui while data is loading instead of showing "No records found" with PrimeNg

semantic-ui

primeng-datatable