如何根据 javascript 或 angular 中的用户选择删除从数组上传的多个文件

Question

嗨，我需要根据 javascript 或 angular 中的用户选择删除从数组中上传的多个文件......我尝试使用以下代码

首先，我们有一些文件以数组的形式上传并显示在复选框中，如下面的代码所示

    <div *ngFor="let image of imagefilename" style="margin-left:10%">
              <label class="container" style="font-size:14px">
                {{image.name}}&nbsp;ModifiedDate:{{image.lastModifiedDate}}
                <input type="checkbox" style="float:left" value="{{image.name}}" [(ngModel)]="imageChecked" 
                       [name]="image.name">&nbsp;&nbsp;
                <span class="checkmark"></span> <br><br>
              </label>
                </div>
          <button *ngIf="imagefilename.length" class="btn btn-danger" type="submit" (click)="resetimage(imagefilename)">Reset Selected files</button>

用户将单击要删除的复选框，然后单击显示的按钮

它调用 function 如下所示

 resetimage(imageName:any) {
for(var i = 0; i<this.imagefilename.length;i++){
if(this.imageChecked){
  this.imagefilename.splice(i,1);
      }
    }
  }

因此，在此 function 中，尽管用户选择了多个要删除的文件，但仅删除了数组中的第一个文件。

因此，如果有任何解决方案，请帮助我。

预期结果：根据 javascript 或 angular 中的用户选择删除从数组上传的多个文件

实际结果：即使用户选择了多个文件，也只删除第一个文件。（根据我的代码）

Answer 1

您的属性imageChecked未与图像绑定。 您应该在image中添加属性imageChecked并修改 html，如下所示。

<div *ngFor="let image of imagefilename" style="margin-left:10%">
              <label class="container" style="font-size:14px">
                {{image.name}}&nbsp;ModifiedDate:{{image.lastModifiedDate}}
                <input type="checkbox" style="float:left" value="{{image.name}}" [(ngModel)]="image.imageChecked" 
                       [name]="image.name">&nbsp;&nbsp;
                <span class="checkmark"></span> <br><br>
              </label>
                </div>
          <button *ngIf="imagefilename.length" class="btn btn-danger" type="submit" (click)="resetimage(imagefilename)">Reset Selected files</button>

你的代码应该是这样的

resetimage(imageName:any) {
for(var i =this.imagefilename.length;i--){
if(this.imagefilename[i].imageChecked){
  this.imagefilename.splice(i,1);
      }
    }
  }