发表于： 2019-10-22 18:15:55
1 767
Angular后台查询功能的实现步骤（日期查询功能暂未实现）
1.首先将页面的布局完成
2.这里的下拉菜单我选择使用antd组件库中的选择器中的第一个，由于这里有两个下拉框，所以[{ngModel}]双向数据绑定的变量明不能重复，否则两个下拉框会关联起来
当某个option被选中后，其nzValue会相应改变，同时type/status的值也会改变，这里type/status尽心了双向数据绑定，ts文件中的type/status也会改变
以下是我的html代码
<div>
<span>类 型</span>
<nz-select [(ngModel)]="type" nzAllowClear nzPlaceHolder="全部" style="width: 180px;">
<nz-option nzValue="0" nzLabel="首页banner"></nz-option>
<nz-option nzValue="1" nzLabel="找职位banner"></nz-option>
<nz-option nzValue="2" nzLabel="找精英banner"></nz-option>
<nz-option nzValue="3" nzLabel="行业大图"></nz-option>
</nz-select>
</div>
</div>
<div class="wrapBottom">
<div>
<span>状 态</span>
<nz-select [(ngModel)]="status" nzAllowClear nzPlaceHolder="全部" style="width: 180px;">
<nz-option nzValue="1" nzLabel="草稿"></nz-option>
<nz-option nzValue="2" nzLabel="上线"></nz-option>
</nz-select>
</div>
<div class="buttonWrap">
<button nz-button nzType="danger" class="clear" (click)='clearData()'>清空</button>
<button nz-button nzType="primary" class="search" (click)="searchData()">搜索</button>
</div>
这是ts文件中的双向数据绑定
public type:any;//搜索的双向数据绑定
public status:any;//搜索的双向数据绑定
nzValue绑定的值见接口文档中的字段约定
3.搜索按钮设置了click事件，如下
//查找数据的方法
searchData(){
if(this.type == undefined){
this.type = ''
}
if(this.status == undefined){
this.status = ''
}
console.log(this.type,this.status);
this.getTable({
type:this.type,
status:this.status
})
}
上方函数调用了获取数据的方法，通过传参获取到type和status也就是搜索后的数据并渲染到页面上，这里使用了if函数，这是由于这里的搜索有两种，当你只选择了其中一种，那么另外一种就是udefined，系统会报错，所以通过if函数来让它变成空，意思就是这个搜索不运行
4.清空按钮设置了click事件，如下
//清空数据的方法
clearData(){
this.type = '';
this.status = '';
this.getTable({
type:this.type,
status:this.status
})
}
如果明白了搜索的原理，那么这个就很好理解了，点击清空按钮后，type和status都变成了空，那么获取到的数就是全部的数据
返回列表
评论