前言

这次有幸可以学习假数据分页显示，虽然是自己死皮赖脸的蹭的！但是也是因为自己积极主动！不管别人怎么看！你要知道你是干什么吃的！没人教就自己去学！不会就死皮赖脸的去问！没有什么不好意思！

---

技术点

学会了就分享！不能藏着掖着！否则早晚把自己害了！就这么简单，总就用到一下几点内容，其实非常的简单！只是自己想象的太复杂了！制作表格也是这么做的！所以表格制作很简单！

• *ngFor
• *ngIf
• 插值绑定
• keyup
• blur
• 逻辑

---

技术点代码实现

ngFor代码实现：首先从ngFor的作用是实现循环绑定，因为我们ts中有很多的数据所以我们让他循环进行插值，会很方便，let title of tabletitle，其中let表示tabletitle的别名，let i=index，index代表我们循环了多少次并且赋值给了i ，ps（ngFor只能写在tbody或者tr中，不可以写在td中，因为他是循环绑定，如果你用td无法实现循环绑定）

 <tbody *ngFor="let title of tabletitle;let i=index"><tr  class="success"  *ngIf="i>=(page-1)*pageSize && i<page*pageSize"><td><input type="checkbox">  {{title.wang}}</td><td>{{title.xue}}</td> <td>{{title.fen}}</td><td><a>{{title.mei}}</a></td>  </tr></tbody>
</table>

---

ngIf：ngif你可以看做是我们在学习Cs的时候用的if判断一样，如果if判断里的内容满足条件则继续执行，如果不满足条件则不执行，已知i是来自于index中的。我们判断i是否在0-5之间，如果满足则执行，否则不执行

*ngIf="i>=(page-1)*pageSize && i<page*pageSize">

---

插值绑定代码实现：插值绑定以前我写过博客，大家可以看我的连接：http://blog.csdn.net/dtttyc/article/details/78513171

 <td>{{title.fen}}</td>

---

keyup与可以blur的区别。在这次我们去到了想文本框中输入数据则触发事件，然后获得文本框中的数据，如果是js我们可以使用document.getelement获取文本框中的值，通过keyup和blur可以触发事件，对于typescript来说是一样的。解释： in代表的是可以认为是id，keyup事件表示为换车触发事件，blur表示失去焦点触发事件

 <li><a class="active"><input #in class="custom-input"  (keyup.enter)="changePage(in.value)"   (blur)="changePage(in.value)" value={{page}} /></a></li>

---

逻辑：看逻辑那就看看我的ts代码吧。
1.需要用到当前页数，总共页数，总共多少条数据，一页可以有多少数据
2 .通过插值绑定赋值
3.点击前一个减1，点击后一个+1
4.加限制条件

import { Component, OnInit } from '@angular/core';
import { dataModule } from './datamodule';//假数据内容
const yue: dataModule[] = [{ wang: "xue1", xue: "wang1", fen: "fen1",mei:"mei2"},{ wang: "xue2", xue: "wang2", fen: "fen2" ,mei:"mei2"},{ wang: "xue3", xue: "wang3", fen: "fen3" ,mei:"mei2" },{ wang: "xue4", xue: "wang4", fen: "fen4" ,mei:"mei2"},{ wang: "xue5", xue: "wang5", fen: "fen5" ,mei:"mei2"},{ wang: "xue6", xue: "wang6", fen: "fen7" ,mei:"mei2"},{ wang: "xue7", xue: "wang7", fen: "fen8" ,mei:"mei2"},{ wang: "xue8", xue: "wang8", fen: "fen9" ,mei:"mei2"},{ wang: "xue9", xue: "wang9", fen: "fen10" ,mei:"mei2"},{ wang: "xue10", xue: "wang10", fen: "fen11" ,mei:"mei2"}
];@Component({selector: 'app-judy',templateUrl: './judy.component.html',styleUrls: ['./judy.component.css']
})export class JudyComponent {//把假数据付给变量，与html产生插值绑定tabletitle = yue;page: number=1; //第几页pageSize:number=5; //页的大小 total:number=yue.length//总数量totalpages=this.total / this.pageSize;///总共有几页//点击前一个first() {if(this.page>1){//page减1让this.page--}}//点击后一个second() {//判断是否小于最大页数if(this.page<this.totalpages){this.page++}  }//文本框输入页数触发事件changePage(page:number){//是否在0至最大页数之间if(page>0 && page <this.totalpages){//输入的数付给pagethis.page=page;//浮点数向上取整this.totalpages=Math.ceil(this.total/this.pageSize)}else if(page < 0){//小于则返回到第一页page=1;this.page=1;}else{//大于则调到最后一页page=this.totalpages;this.page=this.totalpages}   }
}

---

效果图

---

总结

分页查询很简单，只要把原理搞清楚之后，你就会感觉超级的简单，积极主动很重要！！