Angular материал данных не отображается при обновлении данных подписки

Question

У меня есть таблица данных внутри ng-template, и я использую ее в нескольких местах компонента. Существует несколько источников данных и разных таблиц данных, поэтому я отображаю данные с использованием контейнера ng с разными связанными данными.

Я использую ниже datatable без ng-container и структуры ng-template в разных компонентах, и это работает довольно хорошо. Но когда я использовал это, таблица не заполняется, когда данные обновляются.

нг-контейнер

<ng-container [ngTemplateOutlet]="datatableTemplate"
              [ngTemplateOutletContext]="{posts: confirmedCases, postCount: confirmedCasesTotal, loading: confirmedCasesLoadingState}">
</ng-container>

и шаблон данных

<ng-template let-posts let-postCount let-loading #datatableTemplate>
  <div class="table-container">
    <table mat-table [dataSource]="posts">

      <ng-container matColumnDef="user">
        <th mat-header-cell [width]="150" *matHeaderCellDef> User</th>
        <td mat-cell *matCellDef="let element">
          <a [routerLink]="'/users/' + element.user_id">{{ element.user | shorten }}</a>
        </td>
      </ng-container>

      <ng-container [matColumnDef]="def.column" *ngFor="let def of tableHeaders">
        <th mat-header-cell [width]="def.width" *matHeaderCellDef> {{ def.title }} </th>
        <td mat-cell *matCellDef="let element">
        <span [class.text-danger]="def.column === 'status_title' && element[def.column] === 'Banned'"
              [class.text-warning]="def.column === 'status_title' && element[def.column] === 'Suspended'"
              [title]="element[def.column]">
          <fa-icon class="datatable-icon" *ngIf="def.hasOwnProperty('icon')" [icon]="def.icon"></fa-icon>
          {{ element[def.column] | shorten: 30}}
        </span>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="columnDefinitions; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: columnDefinitions;"></tr>
    </table>

    <div class="d-flex justify-content-center mt-3 mb-3" *ngIf="loading">
      <div class="spinner-border text-secondary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>

    <mat-paginator [length]="postCount" (page)="onPageChange($event)"
                   [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
    </mat-paginator>
  </div>
</ng-template>