Javascript mat表内部的mat表（嵌套mat表）分页和排序不'；单击外部表格的下一页时无法工作

这是我的html

                <table mat-table id="upperTable" #outerSort="matSort" [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8" matSort>

                    <!-- <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
                        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
                    </ng-container> -->

                    <ng-container *ngFor="let def of tableDef">
                        <ng-container [matColumnDef]="def.key">
                          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{def.header}} </th>
                          <td mat-cell [ngClass]="def.className" *matCellDef="let element;"> {{element[def.key]}} </td>
                        </ng-container>
                        </ng-container>

                    <ng-container matColumnDef="expandedDetail">

                        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
                            <div class="example-element-detail" *ngIf="innerDataSource?.data.length"
                                [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                                <div class="inner-table mat-elevation-z8" *ngIf="expandedElement">

                                    <table id="innerTable" #innerTables mat-table #innerSort="matSort" [dataSource]="innerDataSource" matSort>

                                        <!-- <ng-container matColumnDef="{{innerColumn}}" *ngFor="let innerColumn of innerDisplayedColumns">
                                            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{innerColumn}} </th>
                                            <td mat-cell *matCellDef="let element" (click)="navigateToRequestForm(element)"> {{element[innerColumn]}}  </td>
                                        </ng-container> -->

                                        <ng-container *ngFor="let innerdef of innerTableDef">
                                            <ng-container [matColumnDef]="innerdef.key">
                                              <th id="inner-table-header" mat-header-cell *matHeaderCellDef mat-sort-header> {{innerdef.header}} </th>
                                              <td mat-cell *matCellDef="let element" [ngClass]="innerdef.className" (click)="navigateToRequestForm(element)"> {{element[innerdef.key]}} </td>
                                            </ng-container>
                                            </ng-container>

                                        <tr mat-header-row *matHeaderRowDef="innerDisplayedColumns"></tr>
                                        <tr id="innertogglerow" mat-row *matRowDef="let row; columns: innerDisplayedColumns;"
                                            [class.example-element-row]="innerDataSource?.data.length"
                                        >
                                        </tr>
                                    </table>
                                    <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5,10,15,20]">
                                    </mat-paginator>
                                    
                                </div>
                            </div>
                        </td>

                    </ng-container>
                
                    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
                    <tr id="toggleRow" mat-row *matRowDef="let element; columns: columnsToDisplay;"
                        [class.example-element-row]="innerDataSource?.data.length"
                        [class.example-expanded-row]="expandedElement === element" (click)="toggleRow(element)">
                    </tr>
                    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
                </table>
                <mat-paginator #branchPaginator [pageSize]="5" [pageSizeOptions]="[5,10,15,20]">
                </mat-paginator>

{{def.header}
{{element[def.key]}
{{innerdef.header}
{{element[innerdef.key]}

下面是我的组件

/outer table sort and pagination 
  @ViewChild("outerSort", { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static: true }) branchPaginator: MatPaginator;

  dataSource: MatTableDataSource<UpperTableData>;// File Drawer Requests 
  innerDataSource: MatTableDataSource<InnerTableData> = new MatTableDataSource<InnerTableData>();

  @ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
  @ViewChildren('innerSort') innerSort: QueryList<MatSort>;
  @ViewChildren("innerTables") innerTables: QueryList<MatTable<InnerTableData>>;

ngOnInit() {
     this.service().subscribe((data) => {
        this.upperTableData = data;
        this.upperTableData.forEach((item) => (item.index = index++));
        this.dataSource = new MatTableDataSource(this.upperTableData);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.branchPaginator;
      });
  }

toggleRow(element: InnerTableData, i) {
 this.expandedElement = this.expandedElement === element ? null : element;
        this.servicex.getByLocationDetails(element.location).subscribe((data) => {
            this.innerTableData = data;
            this.innerDataSource = new MatTableDataSource(this.innerTableData);
          this.cd.detectChanges();
          this.innerDataSource.paginator = this.paginator.toArray()[element.index];
           this.innerDataSource.sort = this.innerSort.toArray()[element.index];
           this.cd.detectChanges();
          this.innerTables.forEach((table, index) => (table.dataSource as MatTableDataSource<InnerTableData>).sort = this.innerSort.toArray()[index]);
        });
       
}

/外部表排序和分页
@ViewChild（“outerSort”，{static:true}）sort:MatSort；
@ViewChild（MatPaginator，{static:true}）branchPaginator:MatPaginator；
数据源：MatTableDataSource；//文件抽屉请求
innerDataSource:MatTableDataSource=新MatTableDataSource（）；
@ViewChildren（MatPaginator）paginator=new QueryList（）；
@ViewChildren（'innerSort'）innerSort:QueryList；
@ViewChildren（“innerTables”）innerTables:QueryList；
恩戈尼尼特（）{
this.service（）.subscribe（（数据）=>{
this.upperTableData=数据；
this.upperTableData.forEach（（item）=>（item.index=index++）；
this.dataSource=新MatTableDataSource（this.upperTableData）；
this.dataSource.sort=this.sort；
this.dataSource.paginator=this.branchPaginator；
});
}
toggleRow（元素：InnerTableData，i）{
this.expandedElement=this.expandedElement==元素？null:元素；
this.servicex.getByLocationDetails（element.location）.subscribe（（数据）=>{
this.innerTableData=数据；
this.innerDataSource=新MatTableDataSource（this.innerTableData）；
this.cd.detectChanges（）；
this.innerDataSource.paginator=this.paginator.toArray（）[element.index]；
this.innerDataSource.sort=this.innerSort.toArray（）[element.index]；
this.cd.detectChanges（）；
this.innerTables.forEach（（表，索引）=>（table.dataSource作为MatTableDataSource.sort=this.innerSort.toArray（）[index]）；
});
}

在外部表上进行排序和分页。 排序和分页工作在内部表的初始视图上

若我在外部表的mat paginator上点击下一页，内部表的分页和排序就会中断。我错过了什么？谢谢你的任何意见