如何在PrimeNG DataTable从Rest API获取数据时使用Skeleton骨架屏？

核心实现思路 #

通过加载状态变量控制骨架屏与真实表格的显示切换：加载中展示骨架屏占位，数据获取完成后自动切换为真实DataTable内容。

具体实现步骤 #

1. 定义加载状态与数据变量
   在组件类中声明状态变量和数据存储变量，初始加载状态设为true：

import { Component, OnInit } from '@angular/core';
import { YourDataService } from './your-data.service'; // 替换为你的业务数据服务

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html'
})
export class TargetComponent implements OnInit {
  isLoading = true;
  tableData: any[] = []; // 存储API返回的真实数据

  constructor(private dataService: YourDataService) {}

  ngOnInit() {
    this.loadTableData();
  }

  loadTableData() {
    this.dataService.fetchDataFromAPI().subscribe({
      next: (res) => {
        this.tableData = res;
        this.isLoading = false; // 数据加载完成，切换状态
      },
      error: (err) => {
        console.error('数据加载失败:', err);
        this.isLoading = false; // 即使请求失败，也关闭骨架屏
      }
    });
  }
}

2. 模板中条件渲染骨架屏与真实表格
   通过*ngIf指令分别控制两种状态的显示：

<!-- 加载状态：展示模仿表格布局的骨架屏 -->
<div *ngIf="isLoading" class="p-datatable p-datatable-gridlines">
  <div class="p-datatable-header">
    <div class="p-skeleton" style="width: 180px; height: 2rem;"></div>
  </div>
  <div class="p-datatable-body">
    <!-- 模拟5行表格骨架，可根据需求调整行数 -->
    <div *ngFor="let _ of [1,2,3,4,5]" class="p-datatable-row">
      <div class="p-datatable-cell">
        <div class="p-skeleton" style="height: 1.5rem;"></div>
      </div>
      <div class="p-datatable-cell">
        <div class="p-skeleton" style="height: 1.5rem;"></div>
      </div>
      <div class="p-datatable-cell">
        <div class="p-skeleton" style="height: 1.5rem;"></div>
      </div>
    </div>
  </div>
</div>

<!-- 加载完成：展示真实DataTable -->
<p-table *ngIf="!isLoading" [value]="tableData">
  <ng-template pTemplate="header">
    <tr>
      <th>字段1</th>
      <th>字段2</th>
      <th>字段3</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.field1 }}</td>
      <td>{{ item.field2 }}</td>
      <td>{{ item.field3 }}</td>
    </tr>
  </ng-template>
</p-table>

细节优化提示 #

• 骨架屏的结构、尺寸尽量与真实表格保持一致，让过渡更自然
• 可根据表格列数调整骨架屏的单元格数量，匹配真实布局
• 异常场景下也要关闭骨架屏，避免用户一直看到加载状态

内容的提问来源于stack exchange，提问作者José Emilio Gutiérrez