Angular开发(二十八)-angular开发中分页的使用

在web开发中常见的分页有

• 前端分页(假分页)
• 后端分页(根据分页来请求数据)

---

现在我们学习的是angular也就是假分页

• 1、npm install ng2-pagination --save

• 2、在app.module.ts文件中引入模块

  import {Ng2PaginationModule} from "ng2-pagination"
  
  @NgModule({
      imports: [
          Ng2PaginationModule
      ],

• 3、新建一个组件

  <div class="row">
      <ul>
          <!--显示分页内容-->
          <!--
          collection是组件中定义的数组或者数组对象，提供的数据
          itemsPerPage: 每页显示的条目数
          currentPage: 当前页
          -->
          <li *ngFor="let item of info | paginate: { itemsPerPage: 10, currentPage: p }">{{item.name}}</li>
      </ul>
  </div>
  <div>
      <!--单机分页事件-->
      <pagination-controls (pageChange)="p = $event"></pagination-controls>
  </div>

  
  info: Array<Object>; //对象数组
  constructor(private fb:FormBuilder) { 
      this.info = [
          {
              "id": 1,
              "name": "html"
          },
          {
              "id": 2,
              "name": "css"
          },
          {
              "id": 3,
              "name": "jquey"
          },
          {
              "id": 4,
              "name": "angular"
          },
          {
              "id": 5,
              "name": "ionic"
          },
          {
              "id": 6,
              "name": "angular2"
          },
          {
              "id": 7,
              "name": "ionic2"
          },
          {
              "id": 8,
              "name": "react"
          },
          {
              "id": 9,
              "name": "node"
          },
          {
              "id": 10,
              "name": "webpack"
          },
          {
              "id": 11,
              "name": "typescript"
          },
          {
              "id": 12,
              "name": "typescript"
          },
          {
              "id": 13,
              "name": "typescript"
          },
          {
              "id": 14,
              "name": "typescript"
          },
          {
              "id": 15,
              "name": "typescript"
          }
      ]
  }

• 4、运行项目上一页下一页是英文的的修改为中文

  node_modules/ng2-pagination/dist/pagination-controls.component.js