Angular 6 primeng p-dataView paginator только генерирует страницу 1 - PullRequest
Новая
       8

Angular 6 primeng p-dataView paginator только генерирует страницу 1

0 голосов
/ 29 октября 2018

Так что, прямо к делу, мой компонент p-dataView выглядит почти так же, как тот, который описан в учебнике по primefaces.org. 

<p-dataView #dv [value]="routes" [paginator]='true' [rows]="5" totalRecords="{{totalRecords}}" pageLinkSize="3" paginatorPosition="both">
    <p-header>
        <div class="ui-helper-clearfix">
            <div class="ui-g">
                <div class="ui-g-6 ui-md-4" style="text-align:right">
                    <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
                </div>
            </div>
        </div>
    </p-header>
    <ng-template let-route pTemplate="listItem">
        <div class="ui-g" style="padding: 2em;border-bottom: 1px solid #d9d9d9">
            <div class="ui-g-12 ui-md-3" style="text-align:center">
                <img [src]="'data:image/png;base64,'+route.thumbnail" alt=""/>
            </div>
            <div class="ui-g-12 ui-md-8 route-details">
                <div class="ui-g">
                    <div class="ui-g-2 ui-sm-6">Name: </div>
                    <div class="ui-g-10 ui-sm-6"><b>{{route.name}}</b></div>

                    <div class="ui-g-2 ui-sm-6">Lenght: </div>
                    <div class="ui-g-10 ui-sm-6"><b>{{route.length}}</b></div>

                    <div class="ui-g-2 ui-sm-6">RecordTime: </div>
                    <div class="ui-g-10 ui-sm-6"><b>{{route.recordTime}}</b></div>
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template let-route pTemplate="gridItem">
        <div style="padding:.5em" class="ui-g-12 ui-md-3">
            <p-panel [header]="route.name" [style]="{'text-align':'center'}">
                <div class="route-detail">{{route.length}} - {{route.recordTime}}</div>
                <hr class="ui-widget-content" style="border-top:0">
                <button pButton type="button" icon="fa-search" (click)="selectRoute($event, route)" style="margin-top:0"></button>
            </p-panel>
        </div>
    </ng-template>
</p-dataView>

и мой машинописный файл 

@Input('routes') routes: Route[];
@Input('totalRecords') totalRecords: Number;

displayDialog: boolean;

public selectedRoute: Route;

constructor() { }

ngOnInit() { }

onDialogHide() {
    this.selectedRoute = null;
}

selectRoute(event: Event, route: Route) {
    this.selectedRoute = route;
    this.displayDialog = true;
    console.log("Selected route: " + this.selectedRoute);
    event.preventDefault();
}

Затем я использую этот компонент в другом месте и заполняю данные после этого, и API-вызов вызывает сервер, который затем возвращает данные, которые я заполняю в p-dataView. Для paginator задано значение true, и он отображается, но он всегда находится на странице 1. Сервер возвращает 10 маршрутов (данных), а p-dataView отображает 5 из них (как указано в строках), но paginator остается только на одной странице. Нужно ли реализовывать какую-то логику для этого или это просто какая-то ошибка? У меня также нет такого взгляда на основные слова, так что это может быть что-то не так с моим проектом. Я создал проект, используя Angular CLI. Я также попытался сделать другой проект только с p-dataView и paginator все еще не работал. Вот как это выглядит:

enter image description here

UPDATE: Я называю app-routelister (который является моим компонентом с p-dataView) таким образом со всеми параметрами. «маршруты» - это массив из 10 маршрутов, а для totalRecords вручную установлено значение 100. 

<div>
  <app-routelister [routes]="routes" [totalRecords]="totalRecords"></app-routelister>
</div>

1 Ответ

0 голосов
/ 29 октября 2018

@ user3029612, пожалуйста, внесите изменения в p-dataView и проверьте значение totalRecords, и если оно больше 1, оно отобразит ваш paginator 

<p-dataView #dv [value]="routes" [paginator]='true' [rows]="5" 
        [totalRecords]="totalRecords" pageLinkSize="3" 
        paginatorPosition="both">
      </p-dataView>
...