Angular 无法读取属性';模板&x27;在MatRowDef.push处未定义的

Angular 无法读取属性';模板&x27;在MatRowDef.push处未定义的,angular,angular-material,lazy-loading,mat-table,Angular,Angular Material,Lazy Loading,Mat Table,我使用角度延迟加载。当从一个子组件切换到另一个子组件时,在某个组件处出现错误,此时我正在显示一个表mat table,而表中未显示数据 TypeError:无法读取未定义的属性“template” 在MatRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.BaseRowDef.extractCellTemplate <ng-container *ngIf="listService.scheduledDd

我使用角度延迟加载。当从一个子组件切换到另一个子组件时,在某个组件处出现错误,此时我正在显示一个表mat table,而表中未显示数据

TypeError:无法读取未定义的属性“template” 在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>

日期
{{element.date}
分支机构
版本
{{element.version}
使用者
{{element.user}
地位
{{element.deployed}
领域
{{element.domain}

我认为您的问题在于没有正确调用数据,因此容器无法读取数据。看起来您是在直接寻址服务,而不是在组件中创建订阅服务的方法

下面是我的数据表的一个示例:

组成部分:

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>

位置
{{container.AITOR}
容器类型
{{container.SOG_MCOLH}
集装箱高度
{{container.GOBH_MCOLH}}
集装箱长度
{{container.AORKH_MCOLH}}
集装箱编号
{{container.MCOLH_N7}
容器名称
{{container.MCOLH_AAAA}}
存储站点
{{container.TAOR_QTSR_EBRI}
存储代码
{{container.QOD_MCHSN}}
地位
{{container.STTOS_RASHI_4_1}
客户MQOTSR
{{container.LQOCH_SHM_MQOTSR_EBRI}
ESN
{container.LQOCH_SHM_LOEZI_QTSR}
代码客户
{{container.LQOCH_QOD_LQOCH}

这个表从服务中获取数据,并使用它获取的Json填充数组。

问题是,我在这个组件中有两个表,它们都使用相同的数据服务。只有一个表因此错误而失败,另一个表工作正常。我正在我的主要组件ngOnInit中为ListService设置所有需要的参数,并直接从模板获取从服务检索到的数据。若我在出错后重新加载页面,数据将在表中接收。