【问题标题】:Angular pagination using PrimeNG使用 PrimeNG 的角度分页
【发布时间】:2019-01-21 05:33:10
【问题描述】:

我正在尝试在我的 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

我错过了什么?

【问题讨论】:

    标签: angular pagination numbers primeng


    【解决方案1】:

    包含在 angular.json

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

    【讨论】:

      【解决方案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",
      
      ],
      

      【讨论】:

        【解决方案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 
              ],
        

        【讨论】:

          猜你喜欢
          • 2017-11-01
          • 1970-01-01
          • 2017-03-18
          • 1970-01-01
          • 2018-06-11
          • 1970-01-01
          • 2023-02-23
          • 1970-01-01
          • 2020-03-03
          相关资源
          最近更新 更多