Angular вызывает api таблицы при нумерации страниц

У меня есть таблица, возвращающая данные для URL-адреса API, и данные по умолчанию разбиты на страницы с сервера. Я хочу вызывать новые данные, когда я нажимаю на страницу 2, 3, etc. и возвращаю данные этой страницы с сервера.

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

Код

Script

listOfData: DataItem[] = []
limit = ''
page = ''
pages = ''

ngOnInit(): void {
  this.getList();
}

getList() {
  this.helpdeskService.getList().subscribe((res) => {
      this.listOfData = res.data;

      this.limit = res.limit //10
      this.page = res.page  //1
      this.pages = res.pages  //2

      if (this.listOfData.length > 0){
        this.isSpinning = false;
      } else {
        this.isSpinning = true;
      }
  },
  (error) => {
    console.info('data', error)
  });
}

HTML

<ng-template #rangeTemplate let-range = "range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
  #filterTable
  nzShowSizeChanger
  (nzCurrentPageDataChange) = "onCurrentPageDataChange($event)"
  [nzData] = "listOfData" class = "kit__utils__table mb-4"
  [nzPageSizeOptions] = "[5, 10, 20, 30, 40]"
  [nzPageSize] = "limit"
  [nzPageIndex] = "page"
  [nzShowTotal] = "rangeTemplate">
  <thead>
  //...
  </thead>
  <tbody>
    ..//
  </tbody>
</nz-table>

Есть идеи?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 003
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно добавить обратный вызов при изменении pageIndex

добавить [nzTotal] = "totalPages" (nzPageIndexChange) = "onPageIndexChange($event)" в шаблон

HTML

<ng-template #rangeTemplate let-range = "range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
  #filterTable
  nzShowSizeChanger
  (nzCurrentPageDataChange) = "onCurrentPageDataChange($event)"
  (nzPageIndexChange) = "onPageIndexChange($event)"
  [nzData] = "listOfData" class = "kit__utils__table mb-4"
  [nzPageSizeOptions] = "[5, 10, 20, 30, 40]"
  [nzPageSize] = "limit"
  [nzPageIndex] = "page"
  [nzTotal] = "totalPages"
  [nzFrontPagination] = "false" 
  [nzShowPagination] = "true" 
  [nzShowTotal] = "rangeTemplate">
  <thead>
  //...
  </thead>
  <tbody>
    ..//
  </tbody>
</nz-table>

добавить это в файл ts

getList(pageIndex: number | null): Observable < any > {
  const endpoint=pageIndex? `${this.env.HELPDESK_LIST}?start=${pageIndex}&limit=5`: this.env.HELPDESK_LIST
  const tokenPromise =
    this.token === undefined
      ? store.get('accessToken')
      : Promise.resolve(this.token);

  return from(tokenPromise).pipe(
    switchMap((token) => {
      this.token = this.token;
      const httpOptions = {
        headers: new HttpHeaders({
          Accept: 'application/json, text/plain',
          'Content-Type': 'application/json',
          Authorization: 'Token ' + this.token,
        }),
      };
      return this.http
        .get(endpoint, httpOptions)
        .pipe(map((data) => data));
    })
  );
}

getList(pageIndex) {
  this.helpdeskService.getList(pageIndex).subscribe((res) => {
      this.listOfData = res.data;

      this.limit = res.limit //10
      this.page = res.page  //1
      this.totalPages = res.total
      this.pages = res.pages  //2

      if (this.listOfData.length > 0){
        this.isSpinning = false;
      } else {
        this.isSpinning = true;
      }
  },
  (error) => {
    console.info('data', error)
  });
}
onPageIndexChange(pageIndex: number | null){
    console.info(pageIndex) // get you the page index
    // make api call requesting data for only that page index
   this.getList(pageIndex)

  }

Комментарии не для расширенного обсуждения; этот разговор был перемещен в чат.

Samuel Liew 21.12.2020 13:28

Другие вопросы по теме