发表于： 2019-10-25 19:55:56
1 829
之前做的任务的页面跳转是将值存在后台的，而发现师兄以及现在很多主流网站都是讲参数存放在url的，所以跟着师兄修改了以下之前的代码，各种思路也重新理了一下
Angular后台查询功能
1.首先将页面的布局完成
.png)
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绑定的值见接口文档中的字段约定，约定如下
.png)
3.搜索按钮设置了click事件，如下
这里的时间搜索，需要将获取到的时间的值的格式“yyyy-MM-dd"转换成时间戳格式，可到菜鸟教程了解Date()对象以及它的getTime()方法
searchData() {
// 以下时进行搜索的判断，防止某个状态值为undefined导致搜索报错
let start = this.startDate ? new Date(this.startDate).getTime() : '';这里是将时间的格式进行转换为时间戳格式
let end = this.endDate ? new Date(this.endDate).getTime() + 86399999 : ''; // + 86399999后可以搜索同一天
this.type == undefined ? '' : this.type;
this.status == undefined ? '' : this.status;
this.DataObj = {
type: this.type,
status: this.status,
startAt: start,
endAt: end
}
this.rou.navigate(['/page/article'], {
queryParams: this.DataObj
})
}
上方函数调用了获取数据的方法，通过传参获取到type和status也就是搜索后的数据并渲染到页面上，这里使用了if函数，这是由于这里的搜索有两种，当你只选择了其中一种，那么另外一种就是udefined，系统会报错，所以通过if函数来让它变成空
4.清空按钮设置了click事件，如下
clearData() {
this.DataObj = {
type: "",
status: "",
startAt: "",
endAt: ""
}
this.startDate = ''; //清空时间，因为上面清空的只是转换之后的时间，双向数据绑定的时间并没有清除
this.endDate = '';
this.rou.navigate(['/page/article'], {
queryParams: this.DataObj
})
}
如果明白了搜索的原理，那么这个就很好理解了，点击清空按钮后，type和status都变成了空，那么获取到的数就是全部的数据
返回列表
评论