Question

我在这里使用文件拖放，在拖放文件后，文件名将显示在表格中，这很好，但是在此表格的顶部是我的问题

在表格的顶部还有一个复选框，仅在删除多个文件后才启用，直到现在它处于启用状态，但是当我删除多个文件时，它应该选中所有复选框，包括选择全部和是否选中删除单个文件，只有该特定文件会被选中，这是可行的。现在，我的主要问题是如果删除了多个文件，如何选择所有复选框，包括“全选”？

下面是我的堆栈闪电代码

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

.html代码

 <div ng2FileDrop
                 [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                 (fileOver)="fileOverBase($event)"
                 [uploader]="uploader"
                 class="well my-drop-zone" >
                Base drop zone
                <br>
                <br>
                <br>
            </div>

             <div class="col-md-9" style="margin-bottom: 40px">

            <h3>Upload queue</h3>
            <p>Queue length: {{ uploader?.queue?.length }}</p>
           <span *ngIf="uploader?.queue?.length > 1">
             <input type="checkbox" id="selectAll" [(ngModel)]="selectAll"  (change)="selectAllFiles($event)" class="form-check-input">
           </span> 

            <table class="table">
                <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th>Size</th>

                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of uploader.queue">
                    <!-- <td><strong>{{ item?.file?.name }}</strong></td> -->
                       <input type="checkbox" class="form-check-input"  value="{{item?.file?.name}}"  [checked]="fileSelectState[item?.file?.name]"
                                                (change)="fileChecked($event)">
                    <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                    <td *ngIf="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                        <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-success btn-xs"
                                (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                            <span class="glyphicon glyphicon-upload"></span> Upload
                        </button>
                        <button type="button" class="btn btn-warning btn-xs"
                                (click)="item.cancel()" [disabled]="!item.isUploading">
                            <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                        </button>
                        <button type="button" class="btn btn-danger btn-xs"
                                (click)="item.remove()">
                            <span class="glyphicon glyphicon-trash"></span> Remove
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

.ts代码

import { Component } from '@angular/core';
import { FileUploader, FileUploadModule, FileItem } from 'ng2-file-upload';

const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  public uploader:FileUploader = new FileUploader({url: URL});
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;

  public fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
  }

  public fileOverAnother(e:any):void {
    this.hasAnotherDropZoneOver = e;
  }
}

注意：由于某种原因，文件名未显示在stackblitz中，请忽略它，文件计数以任何方式增加，并且stackblitz中给出的代码是固定的，无法更改，因此仅我必须很好的解决方法

无法使用angular一次选择多个复选框

0 个答案: