发表于： 2019-10-30 19:44:30
1 951
编辑修改并上传数据
1.首先再article的html文件中增加编辑选项，同时绑定一个有参方法edit()，并传入当前数据对象item
<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>
<nz-divider nzType="vertical"></nz-divider>
<a (click)="edit(item)">编辑</a>
</td>
在article的ts文件中定义edit()方法，点击编辑后，此方法会将该数据的所有参数传递到detail页面的url中
edit(item) {
console.log(item)
this.rou.navigate(['/page/detail'], {
queryParams: item
})
}
2.在detail的ts文件的初始化函数中接收参数
fileList = []; //预览图数组内原数据再ngOnint中
ngOnInit() {
this.actRouter.queryParamMap.subscribe((res: any) => {
console.log(res);
console.log(res.params.id)
// this.imgObj.title = res.params.title
// 之所以不使用以上的方式渲染数据，是因为url有250字符长度的限制，可能取出来的值不完整，所以通过接口去后台取出完整的数据再渲染出来
this.ser.editData(res.params.id).subscribe((result: any) => {
console.log(result)
var img = result.data.article;
img.type = img.type.toString()
console.log(typeof (img.type))
this.imgObj = img;
this.fileList = [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: this.imgObj.img
}];
console.log(this.imgObj)
})
})
}
在service中定义的editData()方法
public editUrl: string = "/a/article"
editData(cs) {
return this.http.get(
`${this.editUrl}/${cs}`
)
}
以上图片数据获取：定义一个空的数组filelist,注意这个数组是双向数据绑定的，之后将原始的file list数组放入初始化函数内，并传入图片thiss.imgObject.img，如果在外面是不行的，涉及到它个ngOnint函数的执行顺序及执行时间
***误区1：因为res.params就是获取到的对象参数，开始可能都会想到直接赋值给双向数据绑定后的imgObject对象，但是url是有250个字符长度的，所以我们接收到的参数可能并不是完整的。这里接口文档中是由提供获取单个数据的接口的，所以这里需要通过res.params.id去后台获取到数据，在渲染出来
***误区2：上面加粗文字img中的type是number类型的，这里是不能直接使用，必须转换成string类型，type选项才能正常显示，具体原因和框架本身有关。
3.接下来就是编辑完成的数据进行上传了，新增页面和编辑页面是同一个页面，触发的是同一个方法，所以这里我们需要做一个判断 ，判断当前状态是新增还是编辑，那么之前的上图图片回调函数以及上传函数都需要修改
修改前的上传函数如下
online() {
let params = JSON.parse(JSON.stringify(this.imgObj)) //深拷贝。不加这一行代码img地址会有问题
console.log(params)
params.status = 2;
params.img = this.imgObj.img[0];
console.log(params)
this.ser.upload(params).subscribe((res: any) => {
console.log(res);
if (res.code == 0) {
this.rou.navigate(['/page/article'])
}
})
}
这里加入一个判断后的函数如下
online() {
let params = JSON.parse(JSON.stringify(this.imgObj)) //深拷贝。不加这一行代码img地址会有问题
console.log(params)
params.status = 2;
if (params.id) { //判断是否有传入id从而判断是否为编辑
console.log(params)
this.ser.putData(params).subscribe((haha: any) => {
if (haha.code == 0) {
this.rou.navigate(['/page/article'])
}
})
} else {
// params.img = this.imgObj.img[0];
this.ser.upload(params).subscribe((res: any) => {
console.log(res);
if (params.title == '' || params.type == null || params.content == '' || params.url == '' || params.img == undefined) {
alert("信息不完整，请继续输入！")
} else if (res.code == 0) {
this.rou.navigate(['/page/article'])
}
})
}
}
上传图片的回调函数修改之前
change(e) {
console.log(e)
if (e.type == "success") {
this.imgObj.img[0] = e.file.response.data.url
}
console.log(this.imgObj)
}
修改之后（唯一的区别就是将[0]去除了）
change(e) {
console.log(e)
if (e.type == "success") {
this.imgObj.img = e.file.response.data.url
}
console.log(this.imgObj)
}
返回列表
评论