Angular 6 primeng p-dataView 分页器只生成第 1 页

Question

直截了当，我的 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>

和我的 typescript 文件

@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 中填充的数据。分页器设置为 true 并显示，但它始终是第 1 页。服务器返回 10 个路由(数据)并且 p-dataView 显示其中 5 个(按行设置)但分页器仅保持 1 页。我是否需要实现某种逻辑才能这样做，或者这只是一些错误？我也没有它在 primefaces 上的外观，所以我的项目可能有问题。我使用 Angular CLI 创建了项目。我还尝试用 p-dataView 和分页器创建另一个项目仍然没有用。这是它的样子:

更新: 我用所有参数调用 app-routelister(这是我的具有 p-dataView 的组件)。 “routes”是 10 条路线的数组，totalRecords 手动设置为 100。

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

Answer 1

@user3029612 请更改 p-dataView 并检查您的 totalRecords 值，如果它大于 1，它将显示您的分页器

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