Пагинация не работает при первой загрузке в mat-paginator (Angular 7) - PullRequest
Новая
       53

Пагинация не работает при первой загрузке в mat-paginator (Angular 7)

0 голосов
/ 23 октября 2019

Я использую 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(), но это не помогло.

1 Ответ

1 голос
/ 23 октября 2019 
  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;
      }
    });
);
}
...