Angular proj с разбивкой на страницы на стороне сервера - при смене страницы (ngx-pagination), загрузка html с использованием GET req. данные. Но html загружается до получения данных - PullRequest
Новая
       95

Angular proj с разбивкой на страницы на стороне сервера - при смене страницы (ngx-pagination), загрузка html с использованием GET req. данные. Но html загружается до получения данных

0 голосов
/ 30 мая 2020

Описание проблемы:

У меня немного сложный проект, и я совершенно не знаком с angular и машинописным текстом.

При загрузке страницы моя страница / dashboard загружается данными, полученными из HTTP-запроса get API. Я использую модуль ngx pagination для разбивки на страницы моей панели инструментов, которая правильно отображает страницы при загрузке страницы. У меня есть разбивка на страницы на стороне сервера. Значит, мне нужно отправить номер страницы. вместе с параметрами GET для отображения правильных записей. Когда я делаю вызов GET api, при смене страницы панель управления становится пустой. Я могу видеть данные, полученные от вызова GET api в сети (путем проверки кода в браузере). Но это займет несколько секунд. Но после получения данных html не загружается. Я пробовал документацию по разбивке на страницы на стороне сервера модуля ngx pagination и многие другие примеры, но не смог запустить свой код. Как я уже сказал, я новичок в angular и машинописных языках, думаю, мне что-то не хватает.

Мы будем очень благодарны за любую помощь или руководство. Спасибо.

Часть My component.ts: 

ngOnInit(): void {
    this.res = this.route.snapshot.data.userposts;      // call to GET api on page load
    console.log(this.res);
    this.leadDataItems = this.res['data']['leadData'];

    this.page = this.res['data']['page'];
    this.pageSize = this.res['data']['itemPerPage'];
    this.collectionSize = this.res['data']['totalCount'];
}

// This function is called on page change
pageChanged(page: any) {
    // appending page no. to the GET params and then call below fun.
    this.getLeadDashboardData();
}    


// This is the function which subscribes the GET api request service to receive the data
getLeadDashboardData() {

    this.apiService
        .getLeadDashboard(this.params)
        .subscribe((data: any) => {
            this.leads = [data];    // GET api service call

            this.res = this.leads[0];
            this.leadDataItems = this.res['data']['leadData'];

            this.page = this.res['data']['page'];
            this.pageSize = this.res['data']['itemPerPage'];
            this.collectionSize = this.res['data']['totalCount'];

        },(error: any)=>{
            alert("error"+error);
        })
}

Мой служебный файл: 

  getLeadDashboard(params: any): Observable<any> {
    this.url = '----';
    return this.httpClient.get(this.url + params);
  }
...