分頁在 mat-paginator (Angular 7) 中的第一次加載時不起作用

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; 在調用listProject() ) 之前在 ngOnInit() 中行，但這沒有幫助。

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