角度删除第一张图像

Question

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

我可以删除小方框中的图像，但是不能从第一个方框（大方框）中删除一个。

有人能帮我使大盒子图像移除工作吗？通过删除大框图像，其中一个小框图像可能会填充该框吗？

另一件事是不正确的，就是在我使用src = url [0]的第一个框中加载图像，即使它不存在，它也总是在加载图像，如何解决？

谢谢!!!

My Code --> 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>

Typescript

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);
}

Answer 1

在您的模板中，您正在将url传递给deleteImage()函数而不是url[0]。

<img [src]="urls[0]">
<span class="delete" style="cursor: pointer;" (click)="deleteImage(url[0])">X</span>

https://stackblitz.com/edit/angular-vgyfam