Angular 12 表頭排序未定義

Question

我正在從 Angular 8 升級到 12，但遇到了一些錯誤。 他們中的大多數是固定的。 只剩下這個了錯誤

此錯誤意味着sortChange未定義。 數據顯示在表格中。 我將此代碼用於排序功能：

ngOnInit(): void {       
this.currentPageIndex = 0;
this.currentPageSize = this.paginationSettings.defaultPageSize;

this.setDataSource(this.entities);

this.sort.sortChange.subscribe((sort: Sort) => {
  debugger;
  return this.sortChanged(sort);
});
}

加載視圖時，我設置事件 this.sort

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

變量的值

  @ViewChild(MatTable, { static: true }) table: MatTable<any>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ContentChild(MatSort, { static: true }) sort: MatSort;
  @ContentChildren(MatHeaderRowDef) headerRowDefs!: QueryList<MatHeaderRowDef>;
  @ContentChildren(MatRowDef) rowDefs!: QueryList<MatRowDef<TEntity>>
  @ContentChildren(MatColumnDef, { descendants: true }) columnDefs!: QueryList<MatColumnDef>;
  @Input() entities: TEntity[]; (the data source)

HTML：

<!-- user component -->
<lq-list
    matSort
    (settingsChanged)="listSettingsChanged.emit($event)"
    [entities]="users"
    [isLoading]="isLoading"
    [displayedColumns]="displayedColumns"
    [paginationSettings]="paginationSettings"
    [totalEntityCount]="totalUserCount"
    >
    <ng-container matColumnDef="email">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
      </ng-container>

    <ng-container matColumnDef="firstName">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Voornaam </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.firstName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastName">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Achternaam </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/users/', row.id]" class="pointer"></mat-row>
</lq-list>

<!-- the container-->
<mat-table [dataSource]="dataSource">
  <ng-content></ng-content>
</mat-table>
<lq-paginator
    (page)="paginationSettingsChanged($event)"
    [totalEntityCount]="totalEntityCount"
    [paginationSettings]="paginationSettings"
></lq-paginator>

ts 表組件

import { Component, Input, EventEmitter, Output, ViewChild, OnInit, AfterViewInit, SimpleChanges, OnChanges } from '@angular/core';
import { User } from '@app/users/models/user';
import { PaginationSettings } from '@app/core/constants/list-pagination-settings';
import { ListSettingsChangedEvent } from '@app/core/models/list-settings-changed-event';

@Component({
  selector: 'lq-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.scss'],
})
export class UsersListComponent {
  /**
   * The user entities to display
   * @type {User[]}
   * @memberof UsersListComponent
   */
  @Input() users: User[];

  /**
   * Indicator whether the list is loading
   * @type {boolean}
   * @memberof UsersListComponent
   */
  @Input() isLoading: boolean;

  /**
   * Pagination settings
   * @type {PaginationSettings}
   * @memberof UsersListComponent
   */
  @Input() paginationSettings: PaginationSettings;

  /**
   * The total user count
   * @type {number}
   * @memberof UsersListComponent
   */
  @Input() totalUserCount: number;

  /**
   * The event emitter for when the list settings have changed
   * @type {EventEmitter<ListSettingsChangedEvent>}
   * @memberof UsersListComponent
   */
  @Output() listSettingsChanged: EventEmitter<ListSettingsChangedEvent> = new EventEmitter<ListSettingsChangedEvent>();

  /**
   * The columns to display
   * @type {string[]}
   * @memberof UsersListComponent
   */
  displayedColumns: string[] = ['email', 'firstName', 'lastName'];
}

Answer 1

@ContentChild(MatSort, { static: true }) sort: MatSort; 將在內容初始化后設置。

所以this.sort在ngOnInit()是未定義的。 將其移至ngAfterContentInit() 。

matSort指令也需要成為投影內容的一部分。

<lq-list
    (settingsChanged)="listSettingsChanged.emit($event)"
    [entities]="users"
    [isLoading]="isLoading"
    [displayedColumns]="displayedColumns"
    [paginationSettings]="paginationSettings"
    [totalEntityCount]="totalUserCount"
    >
    <ng-container matSort>
        <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
          </ng-container>
    ...
    </ng-container>
</lq-list>