Angular之分页

1.保存代码

html文件

    
    
 {{selector_condition_education}}
    
{{selector_condition_time}}
  

  
  

    
    
职位
    
工资
    
学历
    
日期
    
福利
  
  
  

    
    
{{info?.name}}
    
{{info?.salary}}
    
{{info?.education}}
    
{{info?.pubtime | date:'yyyy-MM-dd'}}
    
{{info?.attraction | stringPi:10}}
  


 
 

  

    

      

        
          «
        
      
      
{{item}}
      

        
          »
        
      
    
  

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 = 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;
 }
 }
}