给大家分享一个angular简单的查询功能。

HTML代码

<div class="navgation"> <ul class="nav"> <b (click)="detailsmode()">+</b> <p class="btn btn-success" (click)="isCommentHidden=!isCommentHidden">查询</p> <a>家庭信息</a> <!-- <div > <textarea [(ngModel)]="newComment"></textarea> <button (click)="family()">搜索</button> </div> --> </ul> <!--右侧滑动start--> <div class="mui-content"> <!--左侧滑动--> <ul id="OA_task_1" class="mui-table-view"> <li class="mui-table-view-cell" *ngFor="let family of familylist;let i = index;"> <div class="mui-slider-right mui-disabled"> <a class="mui-btn mui-btn-red" (click)="delete()">删除</a> <a class="mui-btn mui-btn-yellow" (touchstart)="modify(i)">编辑</a> </div> <div class="mui-slider-handle"> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <!-- <a [routerLink]="['../modify',family.id]"> --> <img class="mui-media-object mui-pull-left" width="40px" height="30px" src="http://pic29.photophoto.cn/20131204/0034034499213463_b.jpg"> <div class="mui-media-body"> {{family.familyMemName}} <p class='mui-ellipsis'>关系：{{family.relationshipName}}</p> <p class='mui-ellipsis'>电话：{{family.phone}}</p> </div> </a> </li> </div> </li> </ul> </div> <!--右侧滑动end--> </div>

component代码

import { Component,OnInit } from '@angular/core';
import { InterceptorService } from '../../../share/interceptor.service';
import { Router,ActivatedRoute } from '@angular/router';
import { HomeInfoEntity } from '../../../models/home-info-entity';

@Component({
  selector: 'app-familyinfo',templateUrl: './familyinfo.component.html',styleUrls: ['./familyinfo.component.css']
})
export class FamilyinfoComponent implements OnInit {
  id: string;
  familylist:HomeInfoEntity[]=[];
  private tableUrl:string = "graduate-web/homeInfo/findeByUserId/";
  //data = new Array();
  constructor( 
  private router:Router,private http:InterceptorService,private route: ActivatedRoute){} 


  getData(isQuery?: boolean) {
    let id ='0044fbbe28c254673bc37a';
    let url = this.tableUrl + id;
    this.http.get(url).subscribe( 
      res => {
        console.log(res.json().message + '!!!!!!');
        if (res.json().code == "0000") {
         this.familylist = res.json().data;
        }
      }
    )
  }

  ngOnInit() {
    let id ='0044fbbe28c254673bc37a';
    let homeInfoEntity: HomeInfoEntity = new HomeInfoEntity;
    homeInfoEntity.userId = this.id;
    this.familylist.push(homeInfoEntity);

    this.getData(true);//测试查询
  }

  delete(){
    var btnArray = ['确认','取消'];
    var elem = this;
    //var li = elem.parentNode.parentNode;
    mui.confirm('确认删除该条记录？','删除',btnArray,function(e){
        if(e.index==0){
        }else{
        }
    })
 }

 detailsmode(){/*点击添加按钮跳转到详细信息*/ 
  this.router.navigateByUrl('/workspace/family/familydetails');
}

modify(i:number){
  let familyinfo: HomeInfoEntity = this.familylist[i];
  let familyInfoId: string = familyinfo.id;
  this.router.navigateByUrl('workspace/family/familydetails'+"/"+familyInfoId);
}
}

简单查询代码，大家不要太感谢我，直接复制去用就可以，没有写注释，太懒了，有问题可以私聊我，哪写的不好大家多多指教。