Angular 无法显示mat表内容

预期的行为是什么

显示内容时不会出现错误 数据示例：

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

目前的行为是什么

我得到这个例外

错误类型错误：无法设置未定义的属性“top”
在StickyStyler.push../node_modules/@angular/cdk/esm5/table.es5.js.StickyStyler.\u removeStickyStyle（table.es5.js:900）
在StickyStyler.push../node_modules/@angular/cdk/esm5/table.es5.js.StickyStyler.ClearTickyPositioning（table.es5.js:721）
在MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable.updateStickyHeaderRowStyles（table.es5.js:1669）
在MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable.\u forceRenderHeaderRows（table.es5.js:1986）
at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable.ngAfterContentChecked（table.es5.js:1370）
在callProviderLifecycles（core.js:9258）
在callElementProvidersLifecycles（core.js:9236）
在callLifecycleHooksChildrenFirst（core.js:9226）
在checkAndUpdateView（core.js:10157）上
在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是：

互联网
{{report.title}
日期报告
{{report.dateReport}
%波涅
{report.pctpointeance}
维斯
克莱斯修正案
表中所示为“网上交易”

如果您从服务器获取数据源，您应该将fillTable（）放在ngOnInit（）中。如果我删除了多个标题行，但多个标题行仍有错误，如果您提供接收到的json或其中的一部分，也许我可以重现该错误并帮助您从github复制粘贴该错误吗？这不起作用，因为

matHederRowDef

必须放在html元素上，而不是虚拟容器上。