Question

我正在使用angular 4和primeNG库。

我有这个模板

<div class="owned-container-body" *ngFor="let product of ownedProducts">
    <div class="owned-items">
      <div class="product-name">{{product.description}}</div>
    </div>
    <div class="owned-items">
      <app-subscribe-button [product]="product">

      </app-subscribe-button>
    </div>
  </div>

有时这变得非常巨大，所以我想使用分页， ownedProduct是一个对象数组。所以我想知道如何在具有大量数据的分页器页面上显示此模板。它可以像这样吗？

<p-paginator rows="10" totalRecords="owned.products.length">

<div class="owned-container-body" *ngFor="let product of ownedProductsChunk">
    <div class="owned-items">
      <div class="product-name">{{product.description}}</div>
    </div>
    <div class="owned-items">
      <app-subscribe-button [product]="product">

      </app-subscribe-button>
    </div>
  </div>

</p-paginator>

Answer 1

您不应该使用div包围您的主p-paginator。您在此div和p-paginator到onPageChange事件之间进行沟通。

所以你的HTML代码应该是这样的：

<p-paginator rows="10" [totalRecords]="ownedProducts.length" (onPageChange)="paginate($event)"></p-paginator>

<div class="owned-container-body" *ngFor="let product of ownedProductsChunk">
  <div class="owned-items">
    <div class="product-name">{{product.description}}</div>
  </div>
  <div class="owned-items">
    {{product.id}} : {{product.name}}
  </div><br/>
</div>

然后，您只需将ownedProducts切片以填充ownedProductsChunk数组：

paginate(event) {
     this.ownedProductsChunk = this.ownedProducts.slice(event.first, event.first+event.rows);
  }

见工作Plunker

PrimeNG paginator可以渲染模板吗？

1 个答案: