发表于： 2019-11-09 23:12:07
0 1062
今天完成的事情：
整理下前面任务的知识点
自测angular那里还有BUG
二、【15：30】
修改关楠师兄发现的BUG,
还查一个编辑返回保存数据
（进行中）
补充ES6基础
整理下css常用代码
三、【20：30】后
整理angular笔记
跑步半个小时
明天计划的事情：
补充基础知识
整理前面任务的知识点
看小课堂
遇到的问题：
无
收获：
整理之前的angular知识点
我们要求做一个增加后台数据的项目功能
首先你要先把接口数据写好，而根据增加你需要用到HTTP，POST请求类似向服务器端发送数据来增加后台数据类容。
图片
通过传递上面的名字和图片来增加数据，
那么代码如下
UI组件代码
<div class="clearfix">
<nz-upload nzAction="/a/u/img/task" nzListType="picture-card" [(nzFileList)]="article.img"
[nzPreview]="handlePreview" (nzChange)='change($event)'>
<i nz-icon nzType="plus"></i>
<div class="ant-upload-text">Upload</div>
</nz-upload>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
(nzOnCancel)="previewVisible = false">
<ng-template #modalContent>
<img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
</ng-template>
</nz-modal>
</div>
这里主要就是需要UI组件配图的代码
首先你要在api弄清除它的一些功能比如 nzAction="/a/u/img/task" 这个功能就是直接让我图片传递到后台数据一个专门放图片的文件里面
这里要注意 当我把图片传递进去的时候是分3步 第一步 是开始状态 ，第二步是进行状态 第三步才是我们最后成功所需要的值，要注意的是 数据时专门保存一个专门保存图片的后台数据会传递一个参数，然后在用这个参数来传递到后台数据进行保存，不然会出现图片错误，因为图片类型是string类型 是字符串类型不是对象类型 需要进行改变。
如图
你会发现 打印的时候会出现3个打印的 但是最后一个的图片路径就是我们专门传递给后台数据而返回来的访问图片路径的地址，只需要在增加的时候把这个填写上去就行了
TS文件
创建一个对象数值
public article: any = {
title: '',
type: '',
status: 0,
img: [],
content: '',
url: '',
industry: '',
}
然后调用图片函数的回调
//图片回调
change(girl) {
if (girl.type == "success") {
this.article.img[0] = girl.file.response.data;
console.log(this.article);
console.log("成功");
}
console.log(girl);
}
然后通过点击事件触发函数方法
click() {
let params = JSON.parse(JSON.stringify(this.article));
params.img = params.img[0].url;
params.status = 2;
console.log(params);
if (params.status === 2) {
this.cs.postA(params).subscribe((res: any) => {
console.log(res);
});
console.log(params.img);
}
console.log(this.article.img);
console.log(this.article);
}
这样就直接把数据传递给后台数据了
返回列表
评论