如何解决 ERROR TypeError: Cannot read property 'Checked' of undefined this error

Question

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

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

   <div *ngFor="let image of uploadedImages" style="margin-left:10%"  >
          <label class="container" style="font-size:14px">
            {{image.name}}&nbsp;&nbsp;ModifiedDate:&nbsp;&nbsp;{{image.lastModifiedDate}}
            <input type="checkbox" style="float:left" value="{{image.name}}" id="lifecheck"
                   [name]="image.name">&nbsp;&nbsp;
            <span class="checkmark"></span> <br><br>
          </label>
        </div>
        <div style="padding-left:34px;padding-bottom:3px;">
          <button *ngIf="imagefilename.length" class="btn btn-danger" style="width:200px;padding-left:30px" (click)="dropzone.reset();resetimage(image.Checked)">
            Reset Selected files
          </button>
        </div>

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

它调用 function 如下所示

resetimage(imageName:any) {
 for(var index = 0; index<this.uploadedImages.length;index++){
 if(document.getElementByName("lifecheck")[i].checked==true){
 this.uploadedImages.splice(index,1);
}
}
}

所以在这个 function 中，只有数组中的第一个文件被删除，其中用户选择了多个要删除的文件

所以如果有任何解决方案请帮助我

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

实际结果：出现错误

Answer 1

在您的 typescript document.getElementByName("lifecheck")中找不到 dom 中的元素，因此您收到错误消息。 在您的 dom 中，您正在使用 id ='lifecheck' 创建动态输入元素。 这已经是分配 id 的错误方式，因为 dom id 必须是唯一的。

因此，要解决此问题，您可以更改视图以将动态唯一 ID 分配给输入元素：

   <div *ngFor="let image of uploadedImages;let i=index" style="margin-left:10%"  >
          <label class="container" style="font-size:14px">
            {{image.name}}&nbsp;&nbsp;ModifiedDate:&nbsp;&nbsp;{{image.lastModifiedDate}}
            <input type="checkbox" style="float:left" value="{{image.name}}" id="lifecheck_{{i}}"
                   [name]="image.name">&nbsp;&nbsp;
            <span class="checkmark"></span> <br><br>
          </label>
        </div>
        <div style="padding-left:34px;padding-bottom:3px;">
          <button *ngIf="imagefilename.length" class="btn btn-danger" style="width:200px;padding-left:30px" (click)="dropzone.reset();resetimage(image.Checked,i)">
            Reset Selected files
          </button>

因此，您正在使用 id= "lifecheck_1" 等创建输入元素。然后您可以将此 id 传递给您的 typescript function 并找到该元素：

resetimage(imageName:any,id:number) {
 for(var index = 0; index<this.uploadedImages.length;index++){
 if(document.getElementById("lifecheck_" + id).checked==true){
 this.uploadedImages.splice(index,1);
}
}
}

注意：这应该是修复错误的方法；