mat-spinner 如何在 mat-table 内呈现？

Question

我想知道为什么/如何在 table in this example 中渲染材质微调器：

    <div class="course">

        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
            <mat-spinner></mat-spinner>
        </div>

        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
            ....
        </mat-table>
    </div>

表格没有引用微调器，那么它是如何在内容区域内渲染的呢？

Answer 1

它不是在 mat-table 内渲染 mat-spinner，只是使用与 table body 相同的 css。似乎微调器在表内，但实际上并非如此，即使在加载数据源时，表的标题也存在。通过将与表体相同的 css 分配给微调器容器，微调器似乎在表体中：

<div class="spinner-container" *ngIf="dataSource.loading$ | async">
     <mat-spinner></mat-spinner>
</div>

css:

.spinner-container {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #fafafa; 
  box-shadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)
}

DEMO.