angular - 订阅数据更新时，角度材料数据表不呈现

Question

我里面有数据表ng-template，我在组件中的几个地方使用它。有几个数据源和不同的数据表，所以我使用 ng 容器显示数据表，并带有不同的绑定数据。

我在不同的组件中使用没有 ng-container 和 ng-template 结构的以下数据表，它的效果很好。但是当我这样使用时，更新给定数据时表格不会填满。

ng-容器

<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>

标签： angular