【前言】

今天在做前端图片上传的时候想着能让它自由的删除，站在巨人的肩膀上这次是利用图片组合的方式添加事件实现的，做个简短的总结。

关键代码：

*.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;

  }

效果：

总结：

这种方法尽管不是最好的，但也能够实现功能，下一步的可以做相应的优化。欢迎大神们提出更好的办法！