我正在使用Angular延迟加载。从一个子组件切换到另一个子组件时，在我正在显示表格垫表且数据未显示在表中的组件上出现错误。
TypeError：无法读取未定义的属性“模板” 在MatRowDef.push ../ node_modules/@angular/cdk/esm5/table.es5.js.BaseRowDef.extractCellTemplate
<ng-container *ngIf="listService.scheduledDdataSource">
<table mat-table [dataSource]="listService.scheduledDdataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header><b>Date</b></th>
<td mat-cell *matCellDef="let element"> {{element.date}} </td>
</ng-container>
<ng-container matColumnDef="branch">
<th mat-header-cell *matHeaderCellDef mat-sort-header><b>Branch</b></th>
<td mat-cell *matCellDef="let element"> <a href="//{{element.branch}}"
target="_blank">{{element.branch}}</a>
</td>
</ng-container>
<ng-container matColumnDef="version">
<th mat-header-cell *matHeaderCellDef mat-sort-header><b>Version</b></th>
<td mat-cell *matCellDef="let element"> {{element.version}} </td>
</ng-container>
<ng-container matColumnDef="user">
<th mat-header-cell *matHeaderCellDef mat-sort-header><b>User</b></th>
<td mat-cell *matCellDef="let element"> {{element.user}} </td>
</ng-container>
<ng-container matColumnDef="deployed">
<th mat-header-cell *matHeaderCellDef mat-sort-header><b>Status</b></th>
<td mat-cell *matCellDef="let element"> {{element.deployed}} </td>
</ng-container>
<ng-container matColumnDef="domain">
<th mat-header-cell *matHeaderCellDef mat-sort-header><b>Domain</b></th>
<td mat-cell *matCellDef="let element"> {{element.domain}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>
<div class="action-icons">
<div class="item">
<td mat-cell *matCellDef="let element">
<div class="material-icons">
<button mat-button appModalDirective (click)="listService.selectRow(element)"
[modalId]="'cancel'">
<img src="./assets/icons/baseline-cancel-24px.svg">
</button>
</div>
</td>
</div>
</div>
</th>
</ng-container>
<tr mat-header-row *matHeaderRowDef="listService.displayedColumnsSch"></tr>
<tr mat-row *matRowDef="let row; columns: listService.displayedColumnsSch;">
</tr>
</table>
</ng-container>
答案 0 :(得分：1)
我认为您的问题是您没有正确调用数据，因此容器无法读取数据。似乎您正在直接解决服务问题，而不是在您的组件中subscribes创建方法
这是我的数据表有效的示例：
组件：
dataSource : any = new MatTableDataSource;
ngOnInit() {
this.marinService.getAllContainers().subscribe((result) => {
//Data
this.dataSource = new MatTableDataSource(result);
}}
这是HTML表格：
<!-- Pagenaitor-->
<mat-paginator style="font-size: 22" [pageSize]="1" [pageSizeOptions]="[1,10, 20, 30, 50, 100]">
</mat-paginator>
<!-- Container Table -->
<div>
<mat-table [dataSource]="dataSource" [hidden]="!show" matSort >
<!-- Location -->
<ng-container matColumnDef="AITOR">
<mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.AITOR}} </mat-cell>
</ng-container>
<!-- Type -->
<ng-container matColumnDef="SOG_MCOLH">
<mat-header-cell *matHeaderCellDef mat-sort-header > Container Type </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}} </mat-cell>
</ng-container>
<!-- Height -->
<ng-container matColumnDef="GOBH_MCOLH">
<mat-header-cell *matHeaderCellDef> Container Height </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.GOBH_MCOLH}} </mat-cell>
</ng-container>
<!-- Length -->
<ng-container matColumnDef="AORKH_MCOLH">
<mat-header-cell *matHeaderCellDef> Container Lenght </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.AORKH_MCOLH}} </mat-cell>
</ng-container>
<!-- Number -->
<ng-container matColumnDef="MCOLH_N7">
<mat-header-cell *matHeaderCellDef> Container Number </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.MCOLH_N7}} </mat-cell>
</ng-container>
<!-- Name AAAA -->
<ng-container matColumnDef="MCOLH_AAAA">
<mat-header-cell *matHeaderCellDef > Container Name </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.MCOLH_AAAA}} </mat-cell>
</ng-container>
<!-- QTSR Hebrow -->
<ng-container matColumnDef="TAOR_QTSR_EBRI">
<mat-header-cell *matHeaderCellDef> Storage Site </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.TAOR_QTSR_EBRI}} </mat-cell>
</ng-container>
<!-- Storage Code -->
<ng-container matColumnDef="QOD_MCHSN">
<mat-header-cell *matHeaderCellDef> Storage Code </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.QOD_MCHSN}} </mat-cell>
</ng-container>
<!-- Status -->
<ng-container matColumnDef="STTOS_RASHI_4_1">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.STTOS_RASHI_4_1}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_SHM_MQOTSR_EBRI">
<mat-header-cell *matHeaderCellDef> Customer MQOTSR </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_MQOTSR_EBRI}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_SHM_LOEZI_QTSR">
<mat-header-cell *matHeaderCellDef> ESN </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_LOEZI_QTSR}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_QOD_LQOCH">
<mat-header-cell *matHeaderCellDef> Code Customer </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_QOD_LQOCH}} </mat-cell>
</ng-container>
<!--Row Maker-->
<mat-header-row *matHeaderRowDef="tableColumn"></mat-header-row>
<mat-row *matRowDef="let row; columns: tableColumn;" ></mat-row>
</mat-table>
</div>
该表从服务中获取数据，并通过Json填充数组。