如何解决类型'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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。