从Angular 6中的数组中删除图像预览

Question

我使用Angular制作了一个表单上传图像。它确实很好，但我不知道如何在预览图像数组中删除一个图像。

我的组件ts：

export class ProductEditComponent implements OnInit {
  urls = new Array<string>();
  constructor() {}
  productEditForm: FormGroup;

  onSubmit = () => {
    console.log('abc');
  };

  detectFile = event => {
    this.urls = [];
    let files = event.target.files;
    console.log(typeof files);
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        };
        reader.readAsDataURL(file);
      }
    }
  };
}

我的组件html：

<div class="form-group">
    <label class="control-label col-sm-2">Image Preview:</label>
    <div class="col-sm-10">
      <div class="preview-image">
        <img *ngFor="let url of urls" [src]="url" alt="" width="220" height="180">
      </div>
    </div>
  </div>