Как пройти через API с несколькими страницами?

Я вытаскиваю список аудитории из api. Важное замечание касается только 10 аудиторий на каждую страницу показывает. Другими словами, мне нужно перебирать несколько страниц, чтобы просматривать / проверять информацию для всех аудиторий. Как это сделать?

Вот как теперь выглядит этот вытягивающий список из api:

Список аудитории component.ts:

export class NanoAudienceListComponent implements OnInit {

public audienceListDto: AudienceListDto;
public audienceListDtoData: AudienceListDtoData;

constructor(private audienceModel: AudienceModel,
            private modalModel: ModalModel) {
}

public ngOnInit() {
    this.getListDto();
    this.getListDtoData();
}

private getListDto(): void {
    this.audienceListDto = this.audienceModel.getListDto();
}

private getListDtoData(): void {
    this.audienceModel
        .getListDtoData(this.audienceListDto)
        .catch(error => console.info(error))
}

}

Модель аудитории, в которой мы отправляем api req:

    @Injectable()
    export class AudienceModel extends AbstractEntityModel {

    public static ENTITY_NAME: string = 'audience';

    public dto: { [key: string]: AudienceDto };
    public dtoList: Array<AudienceDto>;

    protected entityName = 'Audience';
    protected list: AudienceListDto | null = null;

    protected service: AudienceService;

    constructor(audienceService: AudienceService) {
        super(dialogModel, notificationModel, audienceService, errorHandler);
    }

    public getListDtoDataFromApiByEntity(audienceListDto: AudienceListDto): Promise<any[]> {
        return this.service.getList();
    }
}

Аудитория:

export class AudienceService { 
public getList(...args): Promise<any> {
    return this.http
        .get(this.listUrl, {headers: this.requestHeaders.getHeaders()})
        .toPromise()
        .then(response => response.json());
}

}

Список компонентов html:

 <nano-table *ngIf = "audienceListDto.isLoaded === true"
            [@fadeIn] = "'in'"
            [tableList] = "audienceListDto.list"
            [columnsArray] = "columnsArray"
            [pageCount] = "10"
            [sortField] = "'latestGeneralUploadUniqueUsers'"
            [sortInverse] = "true">
    <ng-template let-audienceListDtoData = "item">
        <div class = "nano-table-entity-name-cell">
            <span [tooltip] = "audienceListDtoData.name"
                  [routerLink] = "['/private/audience/' + audienceListDtoData.id]"
                  class = "nano-c-p">
                {{ audienceListDtoData.name }}
            </span>
            <span>
                {{ audienceListDtoData.id }}
            </span>
        </div>
        <div>
            <span [hidden] = "audienceListDto.areStatisticsLoaded === false">
                {{ audienceListDtoData.dateRange }}
            </span>
        </div>

Компонент таблицы ts: (эта композиция вызывается в компоненте List, и у них есть родительские дочерние отношенияhp)

export class NanoTableComponent {

@ContentChild(TemplateRef) template: TemplateRef<any>;

@Input() columnsArray: Array<NanoTableHeader> = [];
@Input() isAsync: boolean = false;
@Input() nanoTable: NanoTable;
@Input() pageCount: number = 10;
@Input() pageCountOptions: Array<number> = [5, 10, 20];
@Input() sortField: string | null = null;
@Input() sortInverse: boolean = false;
@Input() useQueryParams: boolean = true;
@Input() hasExport: boolean = false;


@Input()
public set tableList(value: Array<any>) {
    this._tableList = value;
    this.onTableListChange();
}

public get tableList(): Array<any> {
    return this._tableList;
}

@Output() paginationChange = new EventEmitter();
@Output() exportRequest = new EventEmitter();

public isExportInProgress: boolean = false;
public isLoadingAsync: boolean = false;

public pageNumber: number = 1;
public searchWord: string = '';

private _tableList: Array<any> = [];

constructor(private router: Router,
            private activatedRoute: ActivatedRoute) {
}

public getFilteredList() {
    if (this.isAsync === true) {
        return this._tableList.slice(0, this.pageCount);
    }
    if (this.pageNumber > Math.ceil(this.filterListBySearchWord().length / this.pageCount)) {
        this.pageNumber = 1;
    }
    return this.filterListBySearchWord().slice((this.pageNumber - 1) * this.pageCount, (this.pageNumber - 1) * this.pageCount + this.pageCount);
    // TODO: Change this.
}

public getLengthForFooter(): number {
    if (this.isAsync) {
        return this.nanoTable.total;
    } else {
        if (this.searchWord) {
            return this.filterListBySearchWord().length;
        }
        return this.tableList.length;
    }
}

public exportReport(): void {
    this.isExportInProgress = true;
    this.exportRequest.emit();
}

public onPageCountChange(pageCount: number): void {
    if (this.isAsync === false) {
        this.pageCount = pageCount;
        // this.filterList();
    } else {
        this.nanoTable.pageCount = pageCount;
    }
    this.onPaginationChange();
}

public onPageNumberChange(pageNumber: number): void {
    if (this.isAsync === false) {
        this.pageNumber = pageNumber;
        // this.filterList();
    } else {
        this.nanoTable.pageNumber = pageNumber;
    }
    this.onPaginationChange();
}

public onSortFieldChange(sortFiled: string) {
    if (this.isAsync === false) {
        this.sortField = sortFiled;
        if (this.sortField === sortFiled) {
            this.sortInverse = !this.sortInverse;
        }
        this.handleColumnSorting(this.sortField);
    } else {
        this.nanoTable.sortField = sortFiled;
        if (this.nanoTable.sortField === sortFiled) {
            this.nanoTable.sortInverse = !this.nanoTable.sortInverse;
        }
    }
    this.onPaginationChange();
}

private checkAreQueryParamsValid(): boolean {
    return Object.keys(this.getQueryParams()).includes('pageCount');
    // TODO: Fix this.
}

private filterListBySearchWord(): Array<any> {
    if (!this.searchWord) {
        return this._tableList;
    }
    let keys: Array<string> = Object.keys(this.tableList[0]);
    return this._tableList.filter((value: { [key: string]: string | number | null }) => {
        for (let i = 0; i < keys.length; i++) {
            if (value[keys[i]] && value[keys[i]].toString().toLowerCase().includes(this.searchWord.toLowerCase())) {
                return true;
            }
        }
        return false;
    });
}

private getQueryParams(): Params {
    return this.activatedRoute.snapshot.queryParams;
}

private handleColumnSorting(column: string): void {
    if (column === null) {
        return;
    }
    let compare = this.sortInverse ? compareReversed : compareNormal;

    function compareNormal(a, b) {
        if (a[column] === null) {
            return 1;
        }
        if (b[column] === null) {
            return -1;
        }
        if (a[column] < b[column]) {
            return -1;
        }
        if (a[column] > b[column]) {
            return 1;
        }
        return 0;
    }

    function compareReversed(a, b) {
        if (a[column] === null) {
            return -1;
        }
        if (b[column] === null) {
            return 1;
        }
        if (a[column] > b[column]) {
            return -1;
        }
        if (a[column] < b[column]) {
            return 1;
        }
        return 0;
    }

    this._tableList.sort(compare);
}

private onPaginationChange(): void {
    this.setQueryParams();
    if (this.isAsync) {
        this.isLoadingAsync = true;
        this.paginationChange.emit(this.nanoTable);
    }
}

private onTableListChange(): void {
    if (this.isAsync === true) {
        this.setTableParams();
    } else {
        this.setFromQueryParams();
        this.handleColumnSorting(this.sortField);
    }
}

private setFromQueryParams(): void {
    if (this.useQueryParams === true && this.checkAreQueryParamsValid()) {
        const queryParams = this.getQueryParams();
        this.pageCount = parseInt(queryParams['pageCount'], 10);
        this.pageNumber = parseInt(queryParams['pageNumber'], 10);
        this.sortField = queryParams['sortField'];
        this.sortInverse = queryParams['sortInverse'] === 'true';
    }
}

}

HTML-часть табличного компонента:

div *ngIf = "tableList.length > 0"
 class = "nano-table-grid nano-mt-5">

<div class = "nano-f-r">
    <input type = "text" [(ngModel)] = "searchWord" class = "nano-white-smoke-input" placeholder = "Search"/>
    <button *ngIf = "hasExport === true && isExportInProgress === false"
            type = "button"
            class = "nano-f-250 nano-white-smoke-button nano-ml-2"
            (click) = "exportReport()">
        <span>
            CSV
        </span>
    </button>
    <nano-loading-indicator *ngIf = "isExportInProgress === true"
                            class = "nano-loading-bar-small nano-loading-bar-overlay nano-f-250 "
                            style = "margin-left: 2px"></nano-loading-indicator>
</div>

<div class = "nano-table-row nano-table-grid-header">
    <div class = "{{column.columnClass}}"
         *ngFor = "let column of columnsArray"
         [ngClass] = "{'sort-active':sortField === column.columnField}"
         (click) = "onSortFieldChange(column.columnField)">
        <span>
            {{column.columnName}}
        </span>
        <i class = "fa"
           [class.fa-sort-asc] = "sortInverse === true && sortField === column.columnField"
           [class.fa-sort-desc] = "sortInverse === false && sortField === column.columnField">
        </i>
    </div>
</div>