Как разбить объекты массива на HTTP-запрос GET в angular 6?

Question

Я пытаюсь сделать HTTP-вызов GET для API, чтобы получить объект массива, а затем сопоставить результаты с массивом, чтобы разбить значения на страницы. Несмотря на то, что в базе данных имеется около 80 пользовательских значений, когда я выполняю HTTP-вызов, параметр запроса ограничивает мои значения на основе страницы, для всех страниц я получаю только 18 значений. Пожалуйста, посмотрите мои усилия до сих пор. Преобразование наблюдаемого объекта в массив в начальной службе является проблемой.

Пример ответа API (Пример модели значения)

[
  {
    "id": 0,
    "name": "string",
    "email": "string",
    "affiliate_id": 0,
    "subscriber": true,
    "created_at": 0
  }
]

customer.model.ts

export interface ICustomers {
  id: number;
  name: string;
  subscriber: Boolean;
}

Uscreen.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable} from 'rxjs';

import { ICustomers } from './customer.model';

@Injectable({
  providedIn: 'root'
})

export class UscreenService {
  constructor(private http: HttpClient) { }

  getCustomers(currentPage: number): Observable<ICustomers[]> {
    const queryParams = `?page=${currentPage}`;
    return this.http.get<ICustomers[]>(
        'https://uscreen.io/publisher_api/v1/customers' + queryParams
      );
  }
}

Pager.service.ts

import { Injectable } from '@angular/core';
import * as _ from 'underscore';

@Injectable({
  providedIn: 'root'
})

export class PagerService {
    getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
        // calculate total pages
        let totalPages = Math.ceil(totalItems / pageSize);

        let startPage: number, endPage: number;

        if (totalPages <= 5) {
            startPage = 1;
            endPage = totalPages;
        } else {
            if (currentPage <= 3) {
                startPage = 1;
                endPage = 5;
            } else if (currentPage + 1 >= totalPages) {
                startPage = totalPages - 4;
                endPage = totalPages;
            } else {
                startPage = currentPage - 2;
                endPage = currentPage+2;
            }
        }

        // calculate start and end item indexes
        let startIndex = (currentPage - 1) * pageSize;
        let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

        // create an array of pages to ng-repeat in the pager control
        let pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

customer.component.ts

import { Component, OnInit } from '@angular/core';
import { UscreenService} from './uscreen.service';
import { flatMap } from 'rxjs/operators';
import {  PagerService } from './pager.service';

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {
  public customers = [];
  isLoading = false;
  currentPage = 2;
  // pager object
  pager: any = {};
  // paged items
  pagedItems: any[];

  constructor(
    private customersService: UscreenService,
    private pagerService: PagerService
    ) { }

  ngOnInit() {
    this.isLoading = true;
    this.customersService.getCustomers(this.currentPage)
      // .flatMap((response: Response) => response.json())
      .subscribe(customerData => {
        this.isLoading = false;
        this.customers = customerData;
         // initialize to page 1
         this.setPage(this.currentPage);
    });
  }

  setPage(page: number) {
    if (page < 1 || page > this.pager.totalPages) {
        return;
    }

    // get pager object from service
    this.pager = this.pagerService.getPager(this.customers.length, page);

    // get current page of items
    this.pagedItems = this.customers.slice(this.pager.startIndex, this.pager.endIndex + 1);
}
}

customer.component.html

<h1>{{pagedItems.length}} Customers</h1>
<mat-spinner *ngIf="isLoading"></mat-spinner>
<table class="table table-hover" *ngIf="!isLoading">
  <thead>
    <tr>
        <th>Name</th>
        <th>Subscription</th>
    </tr>
  </thead>
    <tr *ngFor="let customer of pagedItems">
    <td>{{ customer.name }}</td>
    <td>{{ customer.subscriber | boo}}</td>
    </tr>
</table>
 <!-- pager -->
 <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
  <li [ngClass]="{disabled:pager.currentPage === 1}">
      <a (click)="setPage(1)">First</a>
  </li>
  <li [ngClass]="{disabled:pager.currentPage === 1}">
      <a (click)="setPage(pager.currentPage - 1)">Previous</a>
  </li>
  <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
      <a (click)="setPage(page)">{{page}}</a>
  </li>
  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
      <a (click)="setPage(pager.currentPage + 1)">Next</a>
  </li>
  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
      <a (click)="setPage(pager.totalPages)">Last</a>
  </li>
</ul>

Я ожидаю увидеть примерно 80 значений, разбитых на 4 страницы или около того, с 18 значениями на каждой странице, вместо этого то, что делает paginator, как вы можете видеть ниже, делит 18 значений со страницы 1 на 10 и 8 значения.