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

在里面添加2个div

<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，并在值为null 时将css 的占位符应用于td

如果您没有数据，则只需将空行插入数据源对象即可构建表。或者你可以只显示一个加载图标，Table retrieving data through HTTP