如何根据用户在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>

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

它调用如下所示的函数

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

因此，在此功能中，尽管用户选择了多个要删除的文件，但仅删除了阵列中的第一个文件。

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

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

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

Answer 1

您的属性imageChecked未与图像绑定。您应该在imageChecked中添加属性image并按如下所示修改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);
      }
    }
  }