Cannot read property 'template' of undefined at MatRowDef.push

Question

I am using Angular lazy loading. When switching from one child component to another, getting an error at a component where I'm displaying a table mat-table and data is not displayed in table.

TypeError: Cannot read property 'template' of undefined at 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>

EliKnaffo EliKnaffo · Accepted Answer · 2019-07-02T09:09:28

I think you problem is that you don't call your data correctly so the container is unable to read it. it seems like you are addressing your service directly instead of creating a method in your component that subscribes to it

Here is an example of my data table that works :

Component :

dataSource : any = new MatTableDataSource;

     ngOnInit() {
        this.marinService.getAllContainers().subscribe((result) => {
         //Data
          this.dataSource = new MatTableDataSource(result);
      }}

This is the HTML table :

    <!-- 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>

This table gets the data from the services and goes of the Json it gets filling the array.

Cannot read property 'template' of undefined at MatRowDef.push

1 Answers