Angular 删除第一张图片

我创建了一个输入来选择多个图像。选择它们的各种图像时，它们放在盒子中（1大盒子和其余的小）。

我可以删除小框中的图像，但无法删除第一个框（大框）中的图像。

有没有人帮我删除大框图像？是否有可能通过删除大框图像，其中一个小框图像将填充该框？

还有一个不对的就是我用src = url [0]加载第一个框里的图片，总是加载一个图片，就算不存在，我该如何解决呢？

谢谢 ！！！

我的代码 --> StackBlitz

html

<div class="drop">
      <div class="cont">
        <div class="browse">
            Upload files
          </div>
        <div class="desc">
          Click to upload or drop your files
        </div>       
      </div>
      <img [src]="urls[0]"><span class="delete" style="cursor: pointer;" (click)="deleteImage(url)">X</span>
      <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>

    <div class="row">
      <div class="Upcard" *ngFor="let url of urls | slice:1">
          <img [src]="url"><span class="delete" style="cursor: pointer;" (click)="deleteImage(url)">X</span>
      </div>
    </div>

打字稿

files:any;
  urls = new Array<string>();
  detectFiles(event) {
    this.urls = [];
    this.files = event.target.files;   
      for (let file of this.files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
      }
  }
  private deleteImage(url: any): void {
    this.urls = this.urls.filter((a) => a !== url);
}