Question

我正在尝试在Angular项目中对表进行分页。执行以下操作：

app.module.ts

import { PaginatorModule } from 'primeng/paginator';

component.html

<p-table [columns]="bookCols" [value]="bookList" [paginator]="true" [rows]="10" >

<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let bookCol of bookCols">
            {{bookCol.header}}
        </th>
    </tr>
</ng-template>

<ng-template pTemplate="body" let-book let-columns="bookCols">
    <tr>
        <td *ngFor="let bookCol of bookCols">
                {{book[bookCol.field]}}
        </td>
    </tr>
</ng-template>

分页效果很好，但是使用简单的蓝色数字image here会降低整体体验，而不是官方页面提供的here

我想念什么？

Answer 1

包含在 angular.json

中

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/omega/theme.css",
  "node_modules/primeng/resources/primeng.min.css",

],

Answer 2

您的angular.json文件应该是这样的

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",

],

Answer 3

它在 .angular-cli.json文件中。最佳做法是添加样式详细信息

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "node_modules/primeicons/primeicons.css",
        "../node_modules/primeng/resources/themes/nova-light/theme.css",
        "styles.scss"  //external style sheet 
      ],

使用PrimeNG进行角分页

3 个答案: