Блог

Я обновляю приложение до Angular 10. В одном из моих компонентов я использую таблицу материалов. В приложении Angular 9 мой html выглядит следующим образом:

 <table mat-table [dataSource]="tableData" matSort class="mat-elevation-z8">
 

там все работает нормально, но при обновлении до Angular 10 (angular material и angular) Я получаю сообщение об ошибке:

 core.js:4442 ERROR TypeError: Cannot read property 'elementRef' of
undefined
    at MatTable._applyNativeTableSections (table.ts:1098)
    at MatTable.ngOnInit (table.ts:471)
 

эта ошибка исчезает, когда я меняю свой html на:

   <mat-table [dataSource]="tableData" matSort class="mat-elevation-z8">
    
    <ng-container matColumnDef="date">
      <mat-header-cell *matHeaderCellDef mat-sort-header="date"> Date </mat-header-cell>
      <mat-cell *matCellDef="let element">{{dateAndTime(element.date)}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="type">
      <mat-header-cell *matHeaderCellDef mat-sort-header="type"> Type </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.type}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns" (click)="onRowClicked(row)" class="clickable-row">
    </mat-row>
  </mat-table>
 

страница отображается нормально, сортировка работает, но когда я удаляюсь от страницы, я получаю сообщение об ошибке:

 core.js:4442 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'viewContainer' of undefined
TypeError: Cannot read property 'viewContainer' of undefined
    at MatTable.ngOnDestroy (table.ts:525)
 

Проверка этой ошибки показывает, что она вызывает функцию ngOnDestroy таблицы.

 // table.ts from angular material 10.2
ngOnDestroy() {
    this._rowOutlet.viewContainer.clear();
    this._noDataRowOutlet.viewContainer.clear();  // error occurs here!
    this._headerRowOutlet.viewContainer.clear();
    this._footerRowOutlet.viewContainer.clear();

    this._cachedRenderRowsMap.clear();

    this._onDestroy.next();
    this._onDestroy.complete();

    if (isDataSource(this.dataSource)) {
      this.dataSource.disconnect(this);
    }
  }
 

По-видимому, у меня нет _noDataRowOutlet, означает ли это, что я должен определить строку без данных? (а также нижний колонтитул и верхний колонтитул из-за следующих строк кода)
Или я могу сохранить свой шаблон в чистоте и как-то избежать этой ошибки?

Обновление до Angular 11 нам не помогло. Мы получили ту же ошибку, заявив, что _noDataRowOutlet не определен. В нашем случае проблема возникла из-за того, что мы переопределили шаблон CdkTable и не добавили директиву noDataRowOutlet . Добавление этого решило нашу проблему:

 <ng-container noDataRowOutlet></ng-container>