类型'NameOfComponent'上不存在属性'pageEvent'

问题描述

我一直在关注following tutorial（是的，我使用的是Angular 7，而不是10）， 但我一直得到这个确切的错误： Property 'pageEvent' does not exist on type 'WorkDocumentComponent'.

我的代码只是提供的教程中的复制粘贴，这真的很奇怪。

任何线索为何如此？我猜我必须在.ts文件中定义pageEvent。 pageEvent = $event到底做什么？它将变量pageEvent定义为事件还是什么？

此外，如果我删除（page）= ...部分，代码可以流畅运行，但是没有任何功能...

更新1 MRE：

.html文件：

  <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox
                    (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()"
                    [aria-label]="checkboxLabel()" color="warn">
      </mat-checkbox>

    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)"
                    [aria-label]="checkboxLabel(row)" color="primary"
                    [aria-label]="checkboxLabel(row)" color="warn">

      </mat-checkbox>
      <!--  -->
    </td>
  </ng-container>
 <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Nr. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Description Column -->
  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Beschreibung </th>
    <td mat-cell *matCellDef="let element" (dblclick)="openTonicUrl()"> {{element.description}} </td>
  </ng-container>

  <!-- OB Column -->
  <ng-container matColumnDef="ob">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> OB </th>
    <td mat-cell *matCellDef="let element"> {{element.ob}} </td>
  </ng-container>

  <!-- receiver Column -->
  <ng-container matColumnDef="receiver">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Empfänger </th>
    <td mat-cell *matCellDef="let element"> {{element.receiver}} </td>
  </ng-container>

.ts文件：

export interface WorkDocument {
  position: number;
  ob: string;
  description: string;
  receiver: string;
  date: string;
}

const ELEMENT_DATA: WorkDocument[] = [];
export class WorkDocumentComponent implements OnInit {
  displayedColumns: string[] = ['select','position','description','ob','receiver','date'];
  dataSource = new MatTableDataSource<WorkDocument>(ELEMENT_DATA);
  selection = new SelectionModel<WorkDocument>(true,[]);
  pageEvent: PageEvent;

  constructor(public DataService: GlobalDataService,private changeDetectorRefs: ChangeDetectorRef) {
  }
/** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

解决方法

Paginator使用Angular的Output-EventEmitter组合触发PageEvent。通过使用pageEvent = $event约定，可以将组件中定义的pageEvent变量分配给事件结果。因此，您需要在名为pageEvent的类中定义一个属性，并像这样pageEvent: PageEvent键入PageEvent。