加载 Mat-table 时添加微调器?
Posted
技术标签:
【中文标题】加载 Mat-table 时添加微调器?【英文标题】:Add a spinner when Mat-table is loading? 【发布时间】:2019-01-03 05:07:31 【问题描述】:我像这样在我的材料表中加载数据:
ngOnInit() return this.annuairesService.getMedecins().subscribe(res => this.dataSource.data = res);
我想在加载时显示微调器:<mat-spinner ></mat-spinner>
我尝试: showSpinner: boolean = true;
ngOnInit() return this.annuairesService.getMedecins()
.subscribe(res => this.dataSource.data = res);
this.dataSource.subscribe(() => this.showSpinner = false
但我有这个错误:
src/app/med-list/med-list.component.ts(54,21): error TS2339: Property 'subscribe' does not exist on type 'MatTableDataSource<>'.
【问题讨论】:
【参考方案1】:table.component.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- table here ...-->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div *ngIf="isLoading"
style="display: flex; justify-content: center; align-items: center; background: white;">
<mat-progress-spinner
color="primary"
mode="indeterminate">
</mat-progress-spinner>
</div>
table.component.ts
isLoading = true;
dataSource = null;
ngOnInit()
this.annuairesService.getMedecins()
subscribe(
data =>
this.isLoading = false;
this.dataSource = data
,
error => this.isLoading = false
);
Live demo
【讨论】:
很高兴我能帮上忙 :) spinner 加载后 2 秒内无法使用桌子是正常的吗? 我不这么认为。如果您无法修复它,可以将其作为单独的问题发布?确保包含 stackblitz 示例。 对于分页表来说效果不佳 --> 微调器应该覆盖任何表行,如果有的话。【参考方案2】:在您开始请求数据时将showSpinner
设置为true,并在您收到数据时将其设置为false(也就是在您的服务方法的subscribe
中)
ngOnInit()
this.showSpinner = true;
this.annuairesService.getMedecins()
.subscribe(res =>
this.showSpinner = false;
this.dataSource.data = res;
);
【讨论】:
【参考方案3】:如果您希望微调器覆盖行,例如在分页表上,您可以使用position: absolute
将微调器覆盖放在表格之前。只需确保在父容器上设置position: relative
,这样叠加层就不会扩展它的父容器大小。
<div class="mat-elevation-z8 mt-3" style="position: relative;">
<div style="display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.6);
position: absolute;
width: 100%;
height: 100%;
z-index: 1;" *ngIf="isLoading" >
<mat-progress-spinner color="accent" mode="indeterminate" diameter="50">
</mat-progress-spinner>
</div>
<table mat-table [dataSource]="data" matSort matSortActive="createDate"
matSortDisableClear matSortDirection="desc">
....
</table>
<mat-paginator [length]="data_count" [pageSize]="10"></mat-paginator>
</div>
【讨论】:
以上是关于加载 Mat-table 时添加微调器?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用加载微调器为 Flutter Web 应用程序添加前缀?