动态设置的垫台上的物料分页器

Question

我有一张桌子，每展开一行，就有一张垫子桌子。 当我扩展第一张表的其中一行时，该行将被扩展并显示第二张表。

我想应用分页器，因此我在HTML模板的表格下方添加了<mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>。

我的模板：

<ng-container *ngIf="users">
  <mat-card class="example-card" class="mat-elevation-z8" style="margin-top: 20px;">
    <mat-card-title>
      <p class="mat-title">Users: {{users.length}}</p>
    </mat-card-title>
    <mat-card-content>

      <div style="width: 400px; margin: auto;" #chartElement></div>
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>

      <table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort>

        <!-- First name Column -->
        <ng-container matColumnDef="firstName">
          <th mat-header-cell *matHeaderCellDef>First name</th>
          <td mat-cell *matCellDef="let user">{{user.firstName}}</td>
        </ng-container>

        <!-- last name Column -->
        <ng-container matColumnDef="lastName">
          <th mat-header-cell *matHeaderCellDef>Last name</th>
          <td mat-cell *matCellDef="let user">{{user.lastName}}</td>
        </ng-container>

        <!-- email Column -->
        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef>Email</th>
          <td mat-cell *matCellDef="let user">{{user.email}}</td>
        </ng-container>

        <!-- Userid Column -->
        <ng-container matColumnDef="userId">
          <th mat-header-cell *matHeaderCellDef>User ID</th>
          <td mat-cell *matCellDef="let user">{{user.userId}}</td>
        </ng-container>

        <!-- Quot Column -->
        <ng-container matColumnDef="numberOfQuot">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Quots</th>
          <td mat-cell *matCellDef="let user">{{user.numberOfQuot}}</td>
        </ng-container>

        <!-- Class Column -->
        <ng-container matColumnDef="numberOfQuotThirtyDays">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Rank</th>
          <td mat-cell *matCellDef="let user">
            <span><img alt="rank" src="../../assets/images/classes/{{user.rank}}.png" /></span>
          </td>
        </ng-container>

        <ng-container matColumnDef="expandedDetail">
          <td mat-cell *matCellDef="let user" [attr.colspan]="displayedColumns.length">
            <div class="example-element-detail" [@detailExpand]="user == expandedElement ? 'expanded' : 'collapsed'">

              <div style="width: 70%;">
                <table mat-table [dataSource]="userDetailsDataSource">

                  <ng-container matColumnDef="action">
                    <th mat-header-cell *matHeaderCellDef>Action</th>
                    <td mat-cell *matCellDef="let userActivity"> {{userActivity.action}} </td>
                  </ng-container>

                  <ng-container matColumnDef="onTenant">
                    <th mat-header-cell *matHeaderCellDef>On tenant</th>
                    <td mat-cell *matCellDef="let userActivity"> {{userActivity.tenant.tenantName}} </td>
                  </ng-container>

                  <ng-container matColumnDef="onProject">
                    <th mat-header-cell *matHeaderCellDef>On project</th>
                    <td mat-cell *matCellDef="let userActivity"> {{userActivity.actionDetails.projectName}} </td>
                  </ng-container>

                  <tr mat-header-row *matHeaderRowDef="userDetailsColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: userDetailsColumns;"></tr>

                </table>

                <mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>       
              </div>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let user; let i =dataIndex; columns: displayedColumns;" class="example-element-row"
          [class.example-expanded-row]="expandedElement === user" (click)="clickOnRowUser(user)">
        </tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

      </table>
    </mat-card-content>
  </mat-card>
</ng-container>

我的组件中的clickOnRowUser函数：

clickOnRowUser(user) {
    if (this.expandedElement == user) {
      this.expandedElement = "";
    }
    else {
      this.expandedElement = user;
    }

    this.userDetailsDataSource = new MatTableDataSource(user.activities);
    this.userDetailsDataSource.paginator = this.paginator;

  }

但是分页器不起作用