Удалить предпросмотр изображения из массива в 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>