Question

我正在使用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;行放在ngOnInit（）中，然后调用listProject()，但这没有帮助。

Answer 1

  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;
      }
    });
);
}

分页在垫式分页器的首次加载中不起作用（角度7）

1 个答案: