javascript - 在使用 Angular 删除文件时选择所有复选框时出现问题

Question

这里我正在做的是使用 ng2 文件上传创建一个“拖放功能”，这里我的问题是当我试图拖放多个文件时，全选功能将被启用，它将全选默认情况下会选中复选框，但在我的场景中，文件删除后不会发生这种情况

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

<div class="container"> 


<div class="well well-lg metadata-well text-center add-file ">

                        <h4  style="float:left ">
                        <span *ngIf="uploader?.queue?.length> 1">&nbsp;
                        <input type="checkbox" id="selectAll" [(ngModel)]="selectAll" (change)="selectAllFiles($event)" class="form-check-input deltha">
                        </span>Add Files</h4>
                    <br />
                    <br />
</div>

<span *ngIf="uploader?.queue?.length== 0">
                        <p class="text-wrap">Your upload queue is empty.
                            <br />Drag and drop files to add them to the queue</p>
                    </span>





<span *ngIf="uploader?.queue?.length > 0">
                        <div class="upload-section">
                            <table class="table">

                                <tbody>
                                    <tr *ngFor="let item of uploader.queue;let i = index">
                                        <td style="padding-top: 0rem"> &nbsp;
                                          <div class="form-check">
                                              <label class="form-check-label">
                                              <input type="checkbox" class="form-check-input"  value="{{item?.file?.name}}"  [checked]="fileSelectState[item?.file?.name]"
                                              (change)="fileChecked($event)">
                                            </label>
                                          </div>
                                      </td>


                                        <td  id="{{ item?.file?.name }}">

                                            <a (click)="selectFile($event);">
                                                <strong>{{ item?.file?.name }}</strong>
                                            </a>

                                        </td>
                                        <td>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                                        <td >{{ item?.file?.type}}</td>
                                        <td>
                                            <button type="button" class="icon-button" (click)="item.remove();fileRemoved(item)">
                                              <i class="fas fa-times"></i>
                                            </button>
                                        </td>

                                    </tr>
                                </tbody>
                            </table>
                        </div>

</span>
 <div ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropped($event)" [uploader]="uploader" class="well well-sm metadata-well-sm text-center my-drop-zone">
                        <img  src={{imga}} />
                        <p>Drag and drop your files here</p>

                    </div>

</div>

Answer 1

这适用于您的 StackBlitz:

参见:https://stackblitz.com/edit/angular-rtzkhd

  constructor(){
    this.uploader.onAfterAddingAll = () => {
      this.selectedFilesArray = [];
      this.uploader.queue.forEach(fileItem => {
        this.fileSelectState[fileItem.file.name] = true;
      });
    }
  }