Angular 7 material mat- tab -如果当前页签有较大的数据表，则切换到新页签时组长延迟

Question

在一个Angular 7项目中，我有一个定义如下的mat-tab-group：

<mat-tab-group id="tab-group" (selectedTabChange)="handleTabChange($event)" [(selectedIndex)]="tabIndx" color="accent">
<mat-tab label="{{rptType.name}}" *ngFor="let rptType of reportTypes" style="height:100%;">
  <ng-template matTabContent >
    <app-report-selection [profModuleType]="profModuleType" [defaultReportType]="rptType" *ngIf="rptType.isEnabled"></app-report-selection>
  </ng-template>        
</mat-tab>

每个选项卡允许用户创建一个报告，该报告本质上只是一个mat表。在报告(mat-table)开始变大之前，一切工作正常。当发生这种情况时，当用户单击新选项卡以运行不同的报告时，UI将在4-7秒内变得无响应。例如，一个报告当前返回了超过7,000条记录，这足以导致此行为。mat-table不包含任何控件或用户可以与之交互的任何内容-它只显示数据。

我当然不想放弃tab控件，但这种延迟是不可接受的。这对我来说也没有任何意义。延迟的原因可能是什么？我能做些什么呢？

Answer 1

已通过从显示表的组件中删除更改检测解决此问题。这是通过向组件添加以下"changeDetection“设置来完成的：

    @Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush 
})

有关更多详细信息，请参阅https://www.thecodecampus.de/blog/optimize-the-performances-of-large-tables-in-your-angular-application/