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>

Есть идеи?

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
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

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