角材料-桌子骨架占位符

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>

应该看起来像

OR

如果您只希望一个div，请使用ngClass并将占位符css的{​​{1}}应用于td

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