Angular Priming paginator可以呈现模板吗？

我正在使用angular 4和Priming库

我有这个模板

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

{{product.description}}

有时这会变得非常巨大，所以我想使用分页， ownedProduct是一个对象数组。因此，我想知道如何在paginator页面上用一块数据显示此模板。 会是这样吗

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

{{product.description}}

您不应该用

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>

---

见工作

我想你是对的，我在一段时间后得出了相同的结论，我会在实施后将其标记为答案

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