无法读取 MatRowDef.push 未定义的属性“模板”

Question

我正在使用 Angular 延迟加载。从一个子组件切换到另一个子组件时，在显示表格 mat-table 且数据未显示在表格中的组件处出现错误。

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>

Answer 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 中去。