PrimeNG分页将所有数据显示在一页上

Question

我想为我的应用程序使用primeng分页。我指的是this doc。但这不起作用。我有10条记录，并且给行赋予了2值，但这却使一页上的所有10条记录都变了。

HTML代码

<div class="p-grid">
 <div class="p-col">
  <p-table #table [value]="coins" [paginator]="true" [rows]="2" [responsive]="true">
  <ng-template pTemplate="header">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body">
    <tr *ngFor="let coin of coins">
      <td>{{coin.id}}</td>
      <td>{{coin.name}}</td>
    </tr>
  </ng-template>
</p-table>

TestComponent.ts

import { Component, OnInit } from '@angular/core';
import { CryptoService } from 'src/app/services/crypto.service';

@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  coins = [];
  constructor(private cryptoservice: CryptoService)
  {
    this.coins = cryptoservice.getMyItems();
  }
  ngOnInit() {
  }
}

CrptoService.ts

import { Injectable } from '@angular/core';

@Injectable({
 providedIn: 'root'
})
export class CryptoService {

 coins= [
   {id: 1, name: 'BTC'},
   {id: 2, name: 'XRP'},
   {id: 3, name: 'SSS'},
   {id: 4, name: 'ERT'},
   {id: 5, name: 'KKK'},
   {id: 6, name: 'LLL'},
   {id: 7, name: 'III'},
   {id: 8, name: 'OOO'},
   {id: 9, name: 'PPPP'}
 ];

 constructor() { }

 getMyItems()
 {
   return this.coins;
 }
}

我正在得到这样的输出。

Answer 1

用下面的行替换您的身体模板：

<ng-template pTemplate="body" let-rowData>

Answer 2

您的表模板主体被错误地实现。

您应该以这种方式实现它，因为您不会动态传递[cols]（各列）：

<ng-template pTemplate="body" let-coin>
    <tr>
       <td>{{coin.id}}</td>
       <td>{{coin.name}}</td>
    </tr>
</ng-template>