mat-spinner 在 mat-table 中是如何渲染的？

Question

我想知道为什么/如何在这个例子中材质微调器在表格内呈现：

    <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)
}

演示。