垫旋转器如何在垫台中呈现？

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。 似乎微调器位于表内部，但实际上并非如此，即使在加载dataSource时，也存在表的标头。 通过将与表主体相同的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)
}

演示