Не удается прочитать свойство 'template' из undefined в MatRowDef.push - PullRequest
Новая
       40

Не удается прочитать свойство 'template' из undefined в MatRowDef.push

0 голосов
/ 02 июля 2019

Я использую угловую ленивую загрузку.При переключении с одного дочернего компонента на другой возникает ошибка в компоненте, где я отображаю таблицу таблицы mat, а данные не отображаются в таблице.

TypeError: Невозможно прочитать свойство 'template' из undefined atMatRowDef.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>

1 Ответ

1 голос
/ 02 июля 2019

Я думаю, что ваша проблема в том, что вы неправильно вызываете свои данные, поэтому контейнер не может их прочитать. кажется, что вы обращаетесь к своему сервису напрямую, а не создаете метод в своем компоненте, который 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, который заполняет массив.

...