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

Question

Hi I need to remove multiple files uploaded from an array based on user selection in javascript or angular......... I have tried with below code

First we have some files that are uploaded in an array and are displayed in checkboxes as shown below in code

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

The user will click on the checkboxes that are to be removed and then click on the button displayed and

it calls a function as displayed below

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

So in this function, only the first file in the array is removed although the user has selected multiple files to remove.

So please help me if there is any solution.

Expected result: to remove multiple files uploaded from an array based on user selection in javascript or angular

Actual result: Only first file is removed even though the user has selected multiple files.(as per my code)

Answer 1

your property imageChecked is not binded with image. You should add property imageChecked in image and modify html like below.

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

And you code should be like this

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