发表于： 2019-10-29 21:14:16
1 747
修改数据在线状态
1.在article的html中使用ui组件库中的气泡确认框，代码如下
<tbody>
<tr *ngFor="let item of bbb">
<td>{{ item.id }}</td>
<td>{{ item.title }}</td>
<td>{{ item.type | type }}</td>
<td>{{ item.createAt | date:'yyyy-MM-dd' }}</td>
<td>{{ item.updateAt | date:'yyyy-MM-dd' }}</td>
<td>{{ item.author }}</td>
<td>{{ item.status | status }}</td>
<td style="display: flex;align-items: center;">
<a nz-popconfirm [nzTitle]="item.status === 2?'确定下线?':'确定上线？'" nzPopconfirmPlacement="top"
(nzOnConfirm)="confirm(item.id,item.status)">{{item.status === 2?'下线':'上线'}}</a>
</td>
</tr>
</tbody>
这里遇到一个坑，ui组件会有一个版本的问题，官网组件版本经常更新，如果你使用的版本一直没改变，可能使用新版本组件的时候会有问题
气泡框描述这里官网使用的是 [nzPopconfirmTitle]，而我的版本依赖没更新，所以这里的描述无法显示，需要将 [nzPopconfirmTitle]改成旧版本的[nzTitle]
2.气泡确认框描述文字需要与当前数据的在线状态相反，这里我是用nzTitle绑定了一个三元表达式进行判断，同时nzTitle需要加上中括号表明绑定的动态属性
注意：上下线文字需要使用单引号，如果使用双引号它会和外面的双引号错误匹配导致报错
3.当前数据如果是上线状态，那么我们修改按钮需要显示下线文字，反之同理，这里我直接使用了两个大括号内加一个三元表达式来实现
4.使用ui组件自带的回调函数，当点击上下线按钮后触发一个方法(confirm),ts中定义的confirm方法如下
confirm(id, status) {
console.log(id, status)
status = status == 1 ? 2 : 1;//先进行后面的三元表达式，再将结果赋给前面
this.ser.putStatusData({
id: id,
status: status
}).subscribe((res: any) => {
console.log(res)
if (res.code == 0) {
console.log(this.savePage)
this.getTable(this.savePage)
}
})
}
首先我们在html中定义回调函数的时候，传入了两个参数，其中item.id告诉后台需要修改的是哪一个数据，item.status则告诉后台它现在的上下线状态。
然后在定义的方法中接受了这两个参数，首先通过三元表达式进行判断并修改其状态值，然后调用service中定义的putStatusData方法，传入id和status值进行更新， 通过返回参数res中的code判断是否成功。然后调用getTable方法刷新页面，在调用getTable的时候传入了参数this.page，这个this.page是在ngOnint中增加的，如果不传入，当你搜索某个数据，再修改上下线后页面刷新后，之前搜索的选项就清空了，所以传入的值可以理解为之前的搜索条件
ngOnint方法修改后如下：
ngOnInit() {
this.actRouter.queryParamMap.subscribe((result: any) => {
console.log(result)
this.savePage = result.params
this.getTable(this.savePage)
})
}
7.在service中定义的putStatusData方法如下，put方法和post方法参数一样，但是修改一般使用put
putStatusData(data) {
const params = typeof (data) === 'object' && String(data) !== '[object File]' ? this.paramFormat(data) : data;
return this.http.put(
this.putStatusUrl, params, this.requestHeader
)
}
返回列表
评论