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

【问题标题】：PrimeNG pagination showning all data on one pagePrimeNG 分页在一页上显示所有数据
【发布时间】：2019-08-22 21:44:01
【问题描述】：

我想为我的应用使用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;
 }
}

我得到这样的输出。

【问题讨论】：

您没有按照您的示例提供的那样执行此操作。请尝试使用 columns 和 rowData
你正在使用 [value]="coins" 和 *ngFor="let coin of coin"。因此，您以这种方式提供了 2 次数据。在正文模板中，您应该使用文档中的“let-rowData”。

标签： angular primeng

【解决方案1】：

将您的正文模板替换为以下行：

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

【讨论】：

【解决方案2】：

您的表格模板主体实施错误。

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

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

【讨论】：