Angular Material - 表骨架占位符

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并申请 css用于占位符到 td当值为 null
如果您没有数据，那么您只需将空行插入到您的数据源对象中，这将构建表。或者你可以只显示一个加载图标， Table retrieving data through HTTP