Angular: невозможно создать петлю пагинации - PullRequest
0 голосов
/ 21 мая 2019

Я вызываю API, который отображает только 30 результатов в качестве ответа.С несколькими страницами мне нужно создать цикл while, который вызывает API и сохраняет данные для каждого вызова, пока не останется страниц.

Я пробовал это несколькими способами.У меня есть сервис, который вызывает API и возвращает данные.В моем компоненте я пытаюсь вызвать эту службу, получить данные и вызвать ее снова, сохранить дополнительные данные и т. Д.

В настоящее время я использую .reduce для хранения данных и разделения их на ключ /.пары значений.

export class SectionDashboardComponent implements OnInit {

constructor(private _freshServiceService: freshServiceService) { }

private ticketCounts: number[];
private ticketResponders: string[];
keyValMap = {};

ngOnInit() {
let thisPage = 1;
this._freshServiceService.fetchTickets(thisPage).subscribe
(
  data =>
  {
    while(data.length > 0){
       thisPage += 1;
       this.getTicketData(data);
    }
  },
  err=> {
    console.log(err);
    if(err.status == "500"){
      console.log('yes')
    }
  }
);
  }


private getTicketData(tickets: Ticket[]): void {
  this.keyValMap = tickets.reduce((x, y) => {
  {x[y.responder_name] = x[y.responder_name] + 1 || 1};
  return x;
  }, this.keyValMap); 

  this.ticketResponders = Object.keys(this.keyValMap);

  this.ticketCounts = Object.values(this.keyValMap);

console.log(this.ticketResponders);
console.log(this.ticketCounts);
}
}

Все, что я пробовал, просто приводит к сбою моего приложения, поскольку оно работает бесконечно и никогда не обновляет переменную «data», или не обновляет номер страницы.Я не знаю, как включить реальный вызов службы в цикл while и подписаться на него И изменять его каждый раз, когда он вызывается.возможно ли это?

Примечание: я понимаю, что приведенный выше код, очевидно, не является решением, поскольку цикл while не включает вызов.Я не совсем уверен, как это сделать.Любая помощь очень ценится.

1 Ответ

0 голосов
/ 22 мая 2019

Вот мой подход:

Первые несколько замечаний:

  • Моя страница содержала только опцию перехода на предыдущую или следующую страницу. Нет выбора для выбора средней страницы.
  • Я использовал хранилище ngrx для хранения данных, связанных с нумерацией страниц и конечного результата.
  • Я использовал mongodb с узлом на бэкэнде.

Шаги:

  1. Как только страница загружается, я вызываю API для получения 20 результатов. (По умолчанию все данные в порядке убывания _id). Я получаю данные только тогда, когда пользователь переходит на новую страницу.
  2. В каждом новом результате я сохранял первый и последний _id документа.
  3. Если пользователь нажимает на следующую страницу, к API поступает новый запрос. В параметре запроса запроса я передал два атрибута, представляющих последний идентификатор результата и «следующий».
  4. Аналогично для предыдущей страницы, первый идентификатор и значение 'prev'.

Надеюсь, это поможет.

...