PrimeNG 分页器可以渲染模板吗？

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

您不应该用p-paginator 包围您的主要div。您可以通过 onPageChange 事件在 div 和 p-paginator 之间进行交流。

所以你的 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