angular简单查询

给大家分享一个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);
}
}

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