Несколько Mat-Paginator на одной странице (таблица данных Angular 5)

У меня есть две таблицы данных Angular на одной странице. Я получаю данные с веб-сервера (асинхронно). Я создал для этого независимый компонент. Моя первая таблица правильно отображается и привязана к сортировке и пагинатору, но вторая не работает. Хотя он показывает данные, но пагинатор и сортировка не работают во второй таблице. Есть мысли, в чем может быть проблема?

Мой компонентный файл TS:

displayedColumns = ['customerId', 'projectId'];
@Input() dataSource2 = new MatTableDataSource<ScheduledTest>();
private paginator: MatPaginator;
private sort: MatSort;

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.dataSource2.paginator = this.paginator;
}

@ViewChild(MatSort) set matSort(mp: MatSort) {
this.sort = mp;
this.dataSource2.sort = this.sort;
}

ngOnInit() {
this.getAllCurrentTestCases();
}

getAllCurrentTestCases() {
this.isError = false;
this.isLoading = true;
this.httpService.getAllCurrentTestCases(this.userService.accountNumber, this.userService.authToken)
  .then((data: AutomatedTest[]) => {
    this.isLoading = false;
    this.dataSource2 = new MatTableDataSource<AutomatedTest>(data);
    this.dataSource.sort = this.sort;
  })
  .catch(error => {
    this.isError = true;
  });
}

Компонент HTML:

<mat-table #table [dataSource] = "dataSource2" matSort>

<ng-container matColumnDef = "customerId">
  <mat-header-cell *matHeaderCellDef mat-sort-header>
    <b> Customer ID </b>
  </mat-header-cell>
  <mat-cell *matCellDef = "let element"> {{element.data.customerId | uppercase }} </mat-cell>
</ng-container>

<ng-container matColumnDef = "projectId">
  <mat-header-cell *matHeaderCellDef mat-sort-header>
    <b> Project ID </b>
  </mat-header-cell>
  <mat-cell *matCellDef = "let element"> {{element.data.projectId | uppercase}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef = "displayedColumns"></mat-header-row>
<mat-row *matRowDef = "let row; columns: displayedColumns;" matRipple class = "element-row" [cdkDetailRow] = "row" [cdkDetailRowTpl] = "tpl"
  (toggleChange) = "onToggleChange($event)"></mat-row>
<!-- <mat-row *matRowDef = "let row; columns: ['expandedDetail']; when: isExpansionDetailRow" [@detailExpand] = "row.element == expandedElement ? 'expanded' : 'collapsed'"
    style = "overflow: hidden">
  </mat-row> -->

Моя страница рендеринга

<app-table-com></app-table-com>
<app-table-com></app-table-com>