[英]ERROR TypeError: Cannot set property 'paginator' of undefined
我正在使用表 Angular 材料創建表以供參考我正在使用此示例https://material.angular.io/components/table/examples
這是我到目前為止所擁有的:
HTML
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
<td mat-cell *matCellDef="let row"> {{row.id}} </td>
</ng-container>
<ng-container matColumnDef="release">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Release</th>
<td mat-cell *matCellDef="let row"> {{row.first_air_date}} </td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
<td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.overview}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
組件.ts
import { Component, ViewChild, OnInit } from '@angular/core';
import { MoviesService } from '../movies.service';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { DatatableComponent } from '@swimlane/ngx-datatable';
@Component({
selector: 'app-tv-shows',
templateUrl: './tv-shows.component.html',
styleUrls: ['./tv-shows.component.scss']
})
export class TvShowsComponent implements OnInit {
displayedColumns: string[] = ['name', 'id', 'release', 'description'];
dataSource: any;
@ViewChild(DatatableComponent) table: DatatableComponent;
constructor(private moviesService: MoviesService) {
this.moviesService.getPopularTVShows().subscribe(res => {
this.dataSource = res.results;
});
}
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
當我運行我的應用程序時,數據完美地顯示在表格中,但出現以下錯誤:
ERROR TypeError: Cannot set property 'paginator' of undefined
因此,無論是排序、過濾還是分頁,都沒有任何作用
我需要一些幫助:
我在上面的代碼中做錯了什么? 任何幫助將不勝感激。
該錯誤表示當this.dataSource
仍未undefined
時,您正在嘗試分配this.dataSource.paginator
。 在完成任務后進行任務。
此外,當您想要使用paginator,sort或過濾器時,您必須使用MatTableDataSource
類。 使用原始數據作為dataSource
不夠的:
ngOnInit() {
this.moviesService.getPopularTVShows().subscribe(res => {
// Use MatTableDataSource for paginator
this.dataSource = new MatTableDataSource(res.results);
^^^^^^^^^^^^^^^^^^
// Assign the paginator *after* dataSource is set
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
你沒有做錯任何事。 就像下面的代碼一樣,將新實例分配給您的數據源。 dataSource: MatTableDataSource<Order> = new MatTableDataSource();
也感謝Kim Kern的解釋
export class OrdersComponent implements OnInit {
displayedColumns: string[] = ['Id', 'Description', 'Status', 'Date', 'Total Price'];
dataSource: MatTableDataSource<Order> = new MatTableDataSource();
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
constructor(private orderService:OrderService) { }
export class DisplayapplicationsComponent {
constructor(private authService: AuthService, private pndService: PndService, private cdref: ChangeDetectorRef) { }
listOfApplications: any;
isTableHasData = true;
private paginator: MatPaginator;
private sort: MatSort;
dataSource: MatTableDataSource<any>;
displayedColumns: string[] = ['apprefno', 'orgname', 'ackowledgeNo', 'contactpersonName'];
@ViewChild(MatSort) set matSort(ms: MatSort) {
if( ms != undefined)
{
this.sort = ms;
this.setDataSourceAttributes();
}
}
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
if(mp != undefined)
{
this.paginator = mp;
this.setDataSourceAttributes();
}
}
setDataSourceAttributes() {
this.dataSource = new MatTableDataSource( this.listOfApplications['data']);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.cdref.detectChanges();
}
ngOnInit(): void {
this.getApplications();
}
getApplications = () => {
let userId = this.authService.getUserId();
const regex = new RegExp('[A-Z]{5}[0-9]{4}[A-Z]{1}');
let inputdata = regex.test(userId) ? { 'panno': userId } : { 'branchCode': this.authService.getBOOffice(), 'applicationstatus': 'P' };
this.pndService.getApplications(inputdata).subscribe((response: any) => {
this.listOfApplications = response;
});
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
if (this.dataSource.filteredData.length > 0) {
this.isTableHasData = true;
} else {
this.isTableHasData = false;
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.