Angular之分页

1.保存代码

html文件

<div class="row">
<div class="col-md-12">
<table class="table">
  <div>
    <!--<span>{{my_name}}</span>-->
    <h1> {{selector_condition_education}}</h1>
    <h1>{{selector_condition_time}}</h1>
  </div>
  <tr>
    <!--<th>序号</th>-->
    <th>职位</th>
    <th>工资</th>
    <th>学历</th>
    <th>日期</th>
    <th>福利</th>
  </tr>
  <!--<tr *ngFor="let info of select_position index as i" (click)="my_name=info?.name" >-->
  <tr *ngFor="let info of select_position | slice:(page_index*page_container-3):(page_index*page_container+1)  index as i " (click)="sendData(info?.name)"  appMyStyle="blue">
    <!--<td>{{i}}</td>-->
    <td>{{info?.name}}</td>
    <td>{{info?.salary}}</td>
    <td>{{info?.education}}</td>
    <td>{{info?.pubtime | date:'yyyy-MM-dd'}}</td>
    <td>{{info?.attraction | stringPi:10}}</td>
  </tr>

</table>
 </div>
 <div class="col-md-12 " >
  <nav aria-label="Page navigation"  class="text-center" *ngIf="page_acount>1">
    <ul class="pagination">
      <li>
        <a href="#" aria-label="Previous" (click)="disablePrevious()">
          <span aria-hidden="true" >&laquo;</span>
        </a>
      </li>
      <li [class.active]="page_index==item" *ngFor="let item of arr_page_container index as i "><a href="javascript:void(0)" (click)="page_index=item">{{item}}</a></li>
      <li>
        <a href="####" aria-label="Next" (click)="disableNext()">
          <span aria-hidden="true" >&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
</div>

ts文件:

 import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';

@Component({
 selector: 'app-position',
templateUrl: './position.component.html',
styleUrls: ['./position.component.css']
})
export class PositionComponent implements OnInit {
@Input() selector_condition_education='';
@Input() selector_condition_time='';
selector_conditions:any={};
@Output() update_data:EventEmitter<number> = new EventEmitter();
position=[... ];
my_position='';
select_position=[];
my_name='';

//分页属性
page_index=1; //页数
page_acount:number;//总页
page_container=4;//每一页数据条数
arr_page_container=[];
constructor(){

}

ngOnChanges(){
this.selector_conditions.education = this.selector_condition_education;
this.selector_conditions.time = this.selector_condition_time;
console.log(this.selector_conditions);
// if(this.degree_now == '全部'){
//   this.select_position = this.position;
// }else{
//   let degree = this.degree_now;
//   this.select_position=this.position.filter(function (pos) {
//     return  ((pos.education).indexOf(degree)!=-1);
//   });
// }
}
ngOnInit() {
 this.select_position = this.position;
 //总页数
 this.page_acount=Math.ceil(this.position.length/this.page_container);
 //放到数组中保存页码
 for(let i=1;i<=this.page_acount;i++){
   this.arr_page_container.push(i);
 }
 }
show(){
alert('ok');
}
sendData(inn){
this.update_data.emit(inn);
}
disablePrevious(){
if(this.page_index!=1){
  this.page_index=this.page_index-1;
 }
 }
 disableNext(){
if(this.page_index!=this.page_acount){
   this.page_index=this.page_index+1;
 }
 }
}