![](/img/trans.png)
[英]Why does the Angular Material table mat-paginator pagesize not work?
[英]Pagination does not work on first load in mat-paginator (Angular 7)
我正在使用 mat-paginator 对表格进行分页。 但是,第一次加载页面时分页不起作用。 但是,如果我对表执行删除/编辑行之类的操作,则分页开始工作。 我认为这是因为分页器没有在第一次加载时得到值。 但我不确定如何解决这个问题。
export class ProjectDashboardComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
public projects = [];
public noProject = true;
displayedColumns: string[] = ['projectName', 'description', 'action'];
dataSource: MatTableDataSource<IProjectData>;
constructor(public dialog: MatDialog,
private _projectService: ProjectService,
private request: RequestService,
private router: Router,
public snackBar: MatSnackBar,
private dialogService: ConfirmationDialogService) { }
ngOnInit() {
this.listProject();
}
listProject() {
const responseSubr = this.request.get<Array<IProject>>('projects');
responseSubr.subscribe(result => {
this.projects = result;
this.dataSource = new MatTableDataSource<IProjectData>(result);
this.dataSource.paginator = this.paginator;
if (this.projects.length === 0) {
this.noProject = true;
} else {
this.noProject = false;
}
});
}
openDialog(): void {
const dialogRef = this.dialog.open(AddProjectDialogComponent, {
width: '500px'
});
dialogRef.afterClosed().subscribe(result => {
this.listProject();
});
}
openEditDialog(project): void {
const projectData = project;
const dialogRef = this.dialog.open(EditProjectComponent, {
width: '500px',
data : projectData
});
dialogRef.afterClosed().subscribe(result => {
this.listProject();
});
}
public deleteProject(project: IProject) {
const msg = 'Are you sure to delete this project ?';
this.dialogService.openConfirmDialog(msg)
.afterClosed().subscribe(res => {
if (res) {
this._projectService.deleteProject(project.projectId)
.subscribe(projects => {
this.listProject();
});
}
});
}
public onViewClick(project: IProject) {
this.router.navigate(['/components', project.projectId]);
}
}
我尝试放置this.dataSource.paginator = this.paginator;
在调用listProject()
) 之前在 ngOnInit() 中行,但这没有帮助。
listProject() {
setTimeout(() =>
const responseSubr = this.request.get<Array<IProject>>('projects');
responseSubr.subscribe(result => {
this.projects = result;
this.dataSource = new MatTableDataSource<IProjectData>(result);
this.dataSource.paginator = this.paginator;
if (this.projects.length === 0) {
this.noProject = true;
} else {
this.noProject = false;
}
});
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.