Angular 材质 - 桌子骨架占位符

Question

我试图在我的 Angular 6 + Material 项目中随处使用骨架占位符。我被困住了<table>，因为我不知道在数据尚未加载时如何使用占位符（下面的示例图片）：

我正在使用什么

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef>Date</th>
    <td mat-cell *matCellDef="let v">{{ v.date }}</td>
  </ng-container>

  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef>Description</th>
    <td mat-cell *matCellDef="let v">{{ v.description }}</td>
  </ng-container>

  <ng-container matColumnDef="amount">
    <th mat-header-cell *matHeaderCellDef class="text-right">Amount</th>
    <td mat-cell *matCellDef="let v" class="text-right">{{ v.amount }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

我的骨架占位符可能是

<tr *ngFor="let s of [1, 2, 3]">
  <td><span class="sk skw-2 skh-3"></span></td>
  <td><span class="sk skw-3 skh-3"></span></td>
  <td><span class="sk skw-2 skh-3"></span></td>
</tr>

如果 dataSource 为空，则应插入该内容。有什么想法如何做到这一点吗？

一种（非常丑陋）的解决方案是这样的：

<table mat-table [dataSource]="dataSource || [{}, {}, {}]">

和柱

<ng-container matColumnDef="date">
  <th mat-header-cell *matHeaderCellDef>Date</th>
  <td mat-cell *matCellDef="let v">
    <ng-container *ngIf="v.date">
      {{ v.date }}
    </ng-container>
    <span *ngIf="!v.date" class="sk skw-2 skh-3"></span>
  </td>
</ng-container>

Answer 1

div里面加2个

<td mat-cell *matCellDef="let element">

拥有一份数据，仅在该值不存在时才显示null

<div *ngIf="element.position">{{element.position}}</div>

让第二个带有占位符的值仅显示为null

<div *ngIf="!element.position" style="background-color: #e8e8e8;padding: 10px;"></div>

它应该看起来像

或者

如果您只想div使用一次ngClass，并将css占位符应用于当td值为null

如果您没有数据，那么您可以将空行插入数据源对象中，这将构建表。或者你可以只显示一个加载图标，表通过 HTTP 检索数据