问题描述
我在单个组件中有3个mat表,并且在页面加载时正在加载其数据。 问题是少于3个表的500条记录,而且加载数据需要8-10秒的时间
<div id="div1"
[hidden]="!( div1===1 && div2===0 && div3===0)">
<table mat-table [dataSource]="dataSource1" matSort>
/////table 1
</table>
<mat-paginator [pageSizeOptions]="[5,10,25,100]"></mat-paginator>
</div>
<div id="div2"
[hidden]="!( div1===0 && div2===1 && div3===0)">
<table mat-table [dataSource]="dataSource2" matSort>
/////table 2
</table>
<mat-paginator [pageSizeOptions]="[5,100]"></mat-paginator>
</div>
<div id="div3"
[hidden]="!( div1===0 && div2===0 && div3===1)">
<table mat-table [dataSource]="dataSource3" matSort>
/////table 3
</table>
<mat-paginator [pageSizeOptions]="[5,100]"></mat-paginator>
</div>
我的TS文件是
export class mycomponent implements OnInit {
@ViewChild(MatPaginator,{ static: true }) paginator: MatPaginator;
@ViewChild(MatSort,{ static: true }) sort: MatSort;
constructor(private _servcall: AppService) {
}
ngOnInit() {
this._servcall.getdatafromapi().subscribe(result => {
this.resultdata = result;
this.displayedColumns = ['col1','col2']
this.dataSource1 = new MatTableDataSource(this.resultdata);
this.dataSource1.paginator = this.paginator;
this.dataSource1.sort = this.sort;
this.displayedColumns = ['col1','col2']
this.dataSource2 = new MatTableDataSource(this.resultdata);
this.dataSource2.paginator = this.paginator;
this.dataSource2.sort = this.sort;
this.displayedColumns = ['col1','col2']
this.dataSource2 = new MatTableDataSource(this.resultdata);
this.dataSource2.paginator = this.paginator;
this.dataSource2.sort = this.sort;
}
})
}
}
我尝试了link的解决方案 但问题仍然相同。 页面加载中存在的代码,我在进行某些制表符更改时调用了相同的代码,在那段时间也很慢
解决方法
尝试* ngIf指令,而不是隐藏指令。