Question

直截了当，我的p-dataView组件看起来很像primefaces.org教程中的那个。

=and(or(A2=A1,A2=A3),iseven(sumproduct((A$1:A1<>A$2:A2)*(A$2:A2=A$3:A3))+(A$1=A$2)))

和我的打字稿文件

<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>

然后我在其他地方使用此组件，并在对服务器进行API调用之后填充数据，然后服务器将返回填充在p-dataView内部的数据。分页器设置为true并显示，但始终为页面1。服务器返回10条路由（数据），p-dataView显示其中5条路由（按行设置），但分页器仅保留1页。我是否需要实施某种逻辑来做到这一点，或者这仅仅是一些错误？我也没有在primefaces上看到它的外观，因此我的项目可能有问题。我使用Angular CLI创建了项目。我还试图仅使用p-dataView创建另一个项目，而paginator仍然无法正常工作。看起来像这样：

更新：我用所有参数调用app-routelister（这是我的具有p-dataView的组件）。 “路线”是10条路线的数组，并且totalRecords手动设置为100。

@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();
}

Answer 1

@ user3029612请在p-dataView中进行更改，并检查您的totalRecords值，如果该值大于1，则会显示您的分页器

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

Answer 2

我刚遇到相同的问题。我终于在primeng的文档中找到了解决方案。看看https://www.primefaces.org/primeng/#/dataview，然后向下滚动到延迟加载部分。

惰性模式非常适合处理大型数据集，而不是加载整个数据，通过调用onLazyLoad加载一小块数据每次分页发生时回调。 [...] 通过执行以下操作将逻辑行数分配给totalRecords 投影查询分页器配置，以便分页器假设实际存在totalRecords记录，则显示UI 大小，尽管实际上它们不像懒惰模式那样，只有记录当前页面上显示的内容已经存在。

因此，无论您正在执行真正的延迟加载，还是不必将延迟属性设置为true：

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

Angular 6 Primeng p-dataView分页器仅生成页面1

2 个答案: