Angular之搜索

1.app.component.html

<div class="row">
<div class="col-md-12">
    <form class="form-inline">
      <div class="form-group">
        <input type="text" class="form-control" name="input_search" id="txt_search" placeholder="Search"  [(ngModel)]="search_info">
      </div>
      <button type="button" class="btn btn-primary" (click)="myposition.search(search_info)">搜索</button>
    </form>
</div>
<div class="col-md-12">
  <app-position-selector [types]="position_education" #posion_education></app-position-selector>
  <app-position-selector [types]="position_time" #posion_time></app-position-selector>
  <!--<span>{{_degress}}</span>-->
   <!--<h1>{{myposition.my_name}}</h1>-->
   <!--<h1>{{from_child_data }}</h1>-->
   <!--<button (click)="myposition.show()">click show</button>-->
</div>
<div class="col-md-12">
  <!--1. 父组件传值给子组件 模板变量是父组件可以看到子组件中的方法跟变量-->
  <!--子组件传值给父组件-->
  <app-position  [selector_condition_education]="posion_education.type" [selector_condition_time]="posion_time.type" (update_data)="getDataChild($event)" #myposition></app-position>
</div>
</div>

2.app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// search_info='';
// send_data='';
from_child_data='';
_degress='';
tab_items = [];
tab_index=0;
//岗位分类
position_education=[];
position_time=[];

constructor(){
console.log('app-component-constructor!!!!');
this.position_education=['全部','大专' ,'本科', '硕士', '博  
士']
this.position_time=['全部','全职','兼职'];
}
select_tab(i){
this.tab_index = i;
this._degress=this.tab_items[this.tab_index];
}
ngOnInit() {
console.log('app-component-ngoninit!!!!');
this._degress = this.tab_items[this.tab_index];
}
 getDataChild(str){
//这里str $event就是子组件发送过来的值
 this.from_child_data=str;
 // alert(str);
  }
 }

3.position.component.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" >-->
  <!--((page_index-1)*page_container):(page_index*page_container)-->
  <!--(page_index*page_container-3):(page_index*page_container+1)-->
  <tr *ngFor="let info of select_position | search:txt_search | slice:((page_index-1)*page_container):(page_index*page_container) 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>

4.position.component.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() txt_search:string;
@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);
//   });
// }
this.arr_page_container=[];
this.page_acount=Math.ceil(this.select_position.length/this.page_container);
//放到数组中保存页码
for(let i=1;i<=this.page_acount;i++){
  this.arr_page_container.push(i);
}
}
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);
 }
 }

//搜索功能
search(txt) {
this.select_position = this.position;
this.page_index=1;
if(txt&&txt.trim().length!=0){
 this.select_position=this.select_position.filter(function(item){
    //item.name拿到json字符串  匹配输入的name  -1就是没找到
    return item.name.toLowerCase().indexOf(txt.toLowerCase())!=-1;
  });
  // return result;
}
this.arr_page_container=[];
this.page_acount=Math.ceil(this.select_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;
  }
  }
 }