单个组件中的多个垫表加载缓慢

如何解决单个组件中的多个垫表加载缓慢

我在单个组件中有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指令，而不是隐藏指令。