У меня есть приложение Angular2
с component
, где у меня есть таблица. Таблица сгенерирована с использованием команды *ngFor
. Каждая строка table
представляет собой объект с 9 полями, которые загружаются из бэкэнд при инициализации компонента. В приложении я пытаюсь использовать ng-bootstrap для углового модуля. ng-boorstrap В частности, я пытаюсь реализовать компонент pagination
.Как реализовать Bootstrap 4 для Angular 2 ngb-pagination
Может кто-нибудь объяснить, как поместить код так, чтобы он отображался, например. только 10 строк на страницу PLS? Или дайте мне ссылку, где выполняется реализация.
То, что я сделал это:
- поставить
NgbModule
ссылки на мой модуль, в котором я объявляю свой компонент, а такжеNgbPaginationConfig
модуля (необходимо для использования пользовательских пагинации) положить
ngb-pagination
код в представлении моихcomponent
как этот<table class="table table-striped"> <thead> <tr> <th>Tracking #</th> <th>Brand</th> <th>Geography</th> <th>Country</th> <th>Contract Name</th> <th>Project Name</th> <th>Status</th> <th>$US BMC</th> <th>Release #</th> <th id="column-last"></th> </tr> </thead> <tbody> <tr *ngFor="let item of viewRows "> <td>{{item.trackingNr}}</td> <td>{{item.brand}}</td> <td>{{item.geo}}</td> <td>{{item.country}}</td> <td>{{item.contractName}}</td> <td>{{item.projectName}}</td> <td>{{item.status}}</td> <td>{{item.usBmc}}</td> <td>{{item.releaseNr}}</td> <td id="column-last"> <span class="awficon-edit" id="row-icons"></span> <span class="awficon-close-2" id="row-icons"></span> </td> </tr> </tbody>
В документации по компоненту отсутствуют важные детали, которые вы накрыли. Спасибо. –
как вы получаете предыдущую страницу? Я вижу тип любой. но отсутствует, когда вы назначаете значение. – Winnemucca
Я получаю params в routerResolver, например: '' 'resolve (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { const page = route.queryParams ['page']? route.queryParams ['page']: '1'; const sort = route.queryParams ['sort']? route.queryParams ['sort']: 'id, asc'; return { страница: страница }; } '' ' –