时间戳

首页 > 解决方案 > 单个组件加载缓慢的多个垫表

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

问题描述

我在单个组件中有 3 个垫子表，我正在加载页面加载时的数据。问题是少于 500 条（对于所有 3 个表）记录也需要 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, 10, 25, 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, 10, 25, 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;

}  
  })

}
}

我已经尝试了链接的解决方案， 但问题仍然相同。我在某些选项卡更改期间调用相同的页面加载代码，在此期间它也很慢

标签： angularjsmat-tableangular-material-tableangular-material-7

解决方案

尝试 *ngIf 指令而不是隐藏。

推荐阅读