无法显示mat-table内容

预期的行为是什么？

显示内容而没有错误的数据示例：

[{…}] 0: dateReport:"2019-05-12" flgVise:true pctPointeAgence:1 
title:"title2" __proto__:Object length:1 __proto__:Array(0)

目前的行为是什么？

我得到这个例外

ERROR TypeError: Cannot set property 'top' of undefined at StickyStyler.push../node_modules/@angular/cdk/esm5/table.es5.js.StickyStyler._removeStickyStyle (table.es5.js:900) at StickyStyler.push../node_modules/@angular/cdk/esm5/table.es5.js.StickyStyler.clearStickyPositioning (table.es5.js:721) at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable.updateStickyHeaderRowStyles (table.es5.js:1669) at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._forceRenderHeaderRows (table.es5.js:1986) at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable.ngAfterContentChecked (table.es5.js:1370) at callProviderLifecycles (core.js:9258) at callElementProvidersLifecycles (core.js:9236) at callLifecycleHooksChildrenFirst (core.js:9226) at checkAndUpdateView (core.js:10157) at callViewAction (core.js:10394)

改变现有行为的用例或动机是什么？

组件打字稿：

export class ListeEtatComponent implements OnInit, AfterViewInit {
displayedColumns = ['title', 'dateReport', 'pctPointeAgence', 'flgVise'];
DATA_SOURCE = new MatTableDataSource();

@ViewChild(MatSort) sort: MatSort;

reports: Report[];
constructor(private etatInterneService: EtatInterneService) { }
ngOnInit() {

}
ngAfterViewInit() {
  this.fillTable();
}
fillTable(): void {
  this.etatInterneService.getReports().subscribe(
    (reports: Report[]) => {
      this.DATA_SOURCE.data = reports;
      console.log(reports);
    }, (error) => {
      console.error(error);
    }
  );
}

}

我的HTML是：

<table mat-table [dataSource]="DATA_SOURCE" matSort>
  <!-- Etat interne  Column -->
  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Etat interne </th>
    <td mat-cell *matCellDef="let report">
        {{report.title}} </td>
  </ng-container>

  <!--  Date report Column -->
  <ng-container matColumnDef="dateReport">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Date report </th>
    <td mat-cell *matCellDef="let report">
        {{report.dateReport}} </td>
  </ng-container>

  <!-- % Pointé  Column -->
  <ng-container matColumnDef="pctPointeAgence">
    <th mat-header-cell *matHeaderCellDef> % Pointé </th>
    <td mat-cell *matCellDef="let report">
        {{report.pctPointeAgence}} </td>
  </ng-container>

  <!-- Visé Column -->
  <ng-container matColumnDef="flgVise">
    <th mat-header-cell *matHeaderCellDef> Visé </th>
    <td mat-cell *matCellDef="let report">
      <mat-radio-button color="warn" [checked]="report.flgVise" disabled></mat-radio-button>
    </td>
  </ng-container>
  <ng-container *matHeaderRowDef="displayedColumns">
    <tr class="tableSecondHeader">
      <th colspan="1">clés fixes</th>
      <th></th>
      <th colspan="2">indicateur en table"entéte des etats interne"</th>
      <th></th>
    </tr>
    <tr mat-header-row></tr>
  </ng-container>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" ></tr>
</table>

哪些版本的Angular，Material，TypeScript，浏览器？

@ angular / cdk：6.2.1

@ angular / material：6.2.1

@ angular / core：6.0.5

打字稿：“2.7.2”

浏览器：chrome

update : 当我将fillTable移动到ngoOnInit（）时它工作但我认为问题仍然存在于多个 Headers 行中：

它合作

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

但不是：

<ng-container *matHeaderRowDef="displayedColumns">
<tr class="tableSecondHeader">
  <th colspan="1">clés fixes</th>
  <th></th>
  <th colspan="2">indicateur en table"entéte des etats interne"</th>
  <th></th>
</tr>
<tr mat-header-row></tr>

UPDATE

它现在有效

我将此示例用于多个 Headers 行

table-multiple-header-footer