페이지 매기기 - dataSource 준비/사용 가능할 때까지 기다리는 방법

Question

페이지를 처음로드 할 때 dataSource가 비어 있다는 점을 제외하고는 잘 작동하는 페이지 매김 서비스와 구성 요소가 있습니다. 두 번째로 dataSource가 준비되었고 dataTable과 paginate를 표시 할 수 있습니다.

이 문제를 해결할 수있는 수정 프로그램이 있습니까? 데이터가 준비 /로드 된 후 함수가 호출되도록합니까?

setTimeOut()은 내 시도에 근거한 옵션이 아닙니다.

list-user.service.ts :

let registeredUser:USers[] = []; 
@Injectable() 
export class ListUserService { 
    constructor(public loginService:LoginService){} 
    getUserDatasource(page:number, limit:number, sortBy?:string, sortType?:DatatableSortType): IPaginableUsers { 

     this.loginService.getUsersList().subscribe(
     (res) => { 
      registeredUser = res.message 
      return registeredUser; 
     }, (err) => {}) 
    } 
    ... 
    ... 
} 

리스트 users.component.ts :

export class ListUsersComponent implements AfterViewInit, OnDestroy { 

    ... 
    ... 
    constructor(private listUserService:ListUserService, private changeDetectorRef:ChangeDetectorRef) { 
      this.fetchUserDataSource(); 
    } 
     ngOnInit(){} 

    ngAfterViewInit() { 
     if (this.datatable) { 
      Observable.from(this.datatable.selectionChange).takeUntil(this.unmount$).subscribe((e:IDatatableSelectionEvent) => 
       this.currentSelection$.next(e.selectedValues) 
      ); 

      Observable.from(this.datatable.sortChange).takeUntil(this.unmount$).subscribe((e:IDatatableSortEvent) => 
       this.fetchUserDataSource(this.currentPagination.currentPage, this.currentPagination.itemsPerPage, e.sortBy, e.sortType) 
      ); 

      Observable.from(this.pagination.paginationChange).takeUntil(this.unmount$).subscribe((e:IDatatablePaginationEvent) => 
       this.fetchUserDataSource(e.page, e.itemsPerPage) 
      ); 
     } 
    } 

    ngOnDestroy() { 
     this.unmount$.next(); 
     this.unmount$.complete(); 
    } 

    shuffleData() { 
     this.users$.next(shuffle(this.users$.getValue())); 
     this.currentSelection$.next([]); 
     this.changeDetectorRef.detectChanges(); 
    } 
     private fetchUserDataSource(page:number = this.currentPagination.currentPage, limit:number = this.currentPagination.itemsPerPage, sortBy:string | undefined = this.currentSortBy, sortType:DatatableSortType = this.currentSortType) { 
     if (sortBy) { 
      this.currentSortBy = sortBy; 
      this.currentSortType = sortType; 
     } 

     const { users, pagination } = this.listUserService.getUserDatasource(page, limit, sortBy, sortType); 

     this.users$.next(users); 
     this.currentSelection$.next([]); 
     this.currentPagination = pagination; 
    } 
} 

Answer 1

당신이 목록 - 사용자 -에 this.listUserService.getUserDataSource하는 ngOnInit에 가입해야 구성 요소

export class ListUsersComponent implements OnInit,... 
{ 
    page:number=1; 
    limit:number=5; 
    sortBy:string=''; 
    .... 
    ngOnInit() { 
    this.listUserService.getUserDataSource(page, limit, sortBy, sortType).subscribe((res)=>{ 
     ....here ... 
    } 
    }