ngx pagination, как сделать несколько нумераций страниц с NgFor? Проблема с моим кодом (pagechange) - манипулирование данными компонента - PullRequest
Новая
       36

ngx pagination, как сделать несколько нумераций страниц с NgFor? Проблема с моим кодом (pagechange) - манипулирование данными компонента

1 голос
/ 19 июня 2019

У меня есть несколько нумераций страниц с ng-for.Для нескольких случаев я использую переменную от ng-for для повторения нумерации страниц, но событие (pagechange) изменяет данные.когда я изменяю страницу в дочерней нумерации страниц, это изменяет данные (имя_первой).У меня есть воспроизведенная проблема stackBlitz

Я также пытался с индексом, но это мешает основной нумерации страниц. 

<ul>
    <div *ngFor="let item of collection | paginate: {itemsPerPage:3, currentPage: page,id: mainPagination}; let i = index;">
        <div class="user">
            {{ i + 1 }}. {{ item.first_name }} 
            <!-- <br>Child Pagination -->
            <div class="childPagination" *ngFor="let address of item.address | paginate: {itemsPerPage:3, currentPage: item['first_name'],id: item['first_name']}" style="background-color:#18bc9c"> 
                {{ address.friend }}
            </div>
            <pagination-controls (pageChange)="item['first_name']= $event" [id]= "item['first_name']" class="my-pagination"></pagination-controls>
        </div>
    </div>
</ul>
<pagination-controls (pageChange)="page = $event" [id]= "mainPagination" class="my-pagination"></pagination-controls>

1 Ответ

1 голос
/ 19 июня 2019

Это пришло с события pageChange вашего ребенка. Вы пытаетесь присвоить номер страницы своему элементу ['first_name'] (который фактически является страницей 2). 

<pagination-controls (pageChange)="item['first_name']= $event" [id]= "item['first_name']" class="my-pagination"></pagination-controls>

pageChange - это событие, генерирующее номер страницы.

Я думаю, вы можете найти способ получить данные страницы с номером страницы, который вы получили от ребенка из документа https://www.npmjs.com/package/ngx-pagination.

...