从 Rest API 检索数据时如何在 PrimeNG DataTable 中使用 Skeleton？

Question

我正在尝试在 PrimeNG 数据表中显示骨架，同时从 REST API 检索信息。

收到信息后，骨架应隐藏并显示数据。

有一个例子：https://primeng.org/sculpture#datatable

但是这个示例没有展示如何用骨架替换接收到的数据。

Answer 1

该示例并未显示如何替换它，因为它只是一个示例。我的建议是添加一个初始化为 true 的布尔值，并在订阅结束时将其更改为 false。你可以试试这个：

export class Foo implements OnInit {
  isLoading: boolean = true;

  constructor(private fooService: FooService) {}

  ngOnInit() {
    this.fooService.getBar().subscribe(data => {
      ...your code
      this.isLoading = false;
    });
  }
}

HTML（按照 primeng 示例）将是这样的：

<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
  <ng-template pTemplate="header">
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td *ngIf="!isLoading; else loading">{{ product.code }}</td>
      <td *ngIf="!isLoading; else loading">{{ product.name }}</td>
      <td *ngIf="!isLoading; else loading">{{ product.category }}</td>
      <td *ngIf="!isLoading; else loading">{{ product.quantity }}</td>
      <ng-template #loading>
        <td><p-skeleton></p-skeleton></td>
        <td><p-skeleton></p-skeleton></td>
        <td><p-skeleton></p-skeleton></td>
        <td><p-skeleton></p-skeleton></td>
      </ng-template>
    </tr>
  </ng-template>
</p-table>

确保根据需要更改代码，这只是一个示例

Answer 2

要在从 REST API 获取数据时在 PrimeNG 数据表中显示骨架，请设置组件和服务，创建初始化为 true 的布尔“加载”变量，使用 pTemplate 定义骨架和表列，有条件地渲染骨架或数据表with *ngIf 基于'loading'，并在检索到数据后将'loading'设置为 false。