【angular】——上传图片之删除
发布时间:2020-12-17 08:19:31 所属栏目:安全 来源:网络整理
导读:【前言】 今天在做前端图片上传的时候想着能让它自由的删除,站在巨人的肩膀上这次是利用图片组合的方式添加事件实现的,做个简短的总结。 关键代码: *.component.html: div class="form-group" div class="company" button class="btn btn-danger commit_
【前言】今天在做前端图片上传的时候想着能让它自由的删除,站在巨人的肩膀上这次是利用图片组合的方式添加事件实现的,做个简短的总结。 关键代码:*.component.html:
<div class="form-group"> <div class="company"> <button class="btn btn-danger commit_assignment" (click)="import($event)">上传学历图片</button> <div *ngFor="let pictureUrl of picAllUrls"> <img src="{{pictureUrl}}" alt="学历图片" width="40" height="40" style="float: left;margin-top:5px"/> <img src="{{deleteIcon}}" alt="删除按钮" width="10" height="10" style="float: left; margin-right: 10px;" (click)="deletePic(pictureUrl)"/> </div> </div> </div> *.component.ts:
public deleteIcon: string = 'assets/images/delete-icon.jpg';//默认图片地址 deletePic(pictureUrl: any) { console.log('==============================================='); console.log(pictureUrl); console.log(this.picAllUrls); let picNew = []; for (let i = 0; i < this.picAllUrls.length; i++) { if (!(this.picAllUrls[i]==pictureUrl)) { console.log('this.picAllUrls[i]'); console.log(this.picAllUrls[i]); picNew.push(this.picAllUrls[i]); } } this.picAllUrls = picNew; } 效果:总结:这种方法尽管不是最好的,但也能够实现功能,下一步的可以做相应的优化。欢迎大神们提出更好的办法! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读