PrimeNG paginator可以渲染模板吗？

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>

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

<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

你不应该用qazxsw poi包围你的主要qazxsw poi。你通过div事件在这个p-paginator和div之间进行交流。

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

p-paginator

然后，你只需要切割你的onPageChange来填充你的

<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