ici, ce que je fais, c'est que je crée une fonction "Glisser-Déposer" en utilisant le téléchargement de fichiers ng2 et ici mon problème est que chaque fois que j'essaie de déposer plus d'un fichier, la fonction Tout sélectionner sera activée et elle sélectionnera tout cases à cocher par défaut, mais cela ne se produit pas dans mon scénario après la suppression du fichier
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">
<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">
<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>
3 Réponses :
Une solution (peut-être pas la meilleure):
for (var item in this.uploader.queue) {
this.fileSelectState[this.uploader.queue[item].file.name] = e.target.checked
}
Vous ne définissez rien dans fileSelectState, qui est lié à l'attribut vérifié de vos cases à cocher. p >
Ce code ajoute les noms de fichiers à fileSelectState en tant que propriétés lorsque les fichiers sont déposés.
Donc, pour cocher ou décocher les cases, vous pouvez jouer avec les valeurs true / false de les propriétés fileSelectState .
Vous avez ajouté ce code à la fonction selectAllFiles:
public fileDropped(fileList: any): void
{
for(var i =0 ; i< fileList.length; i++){
this.fileSelectState[fileList[i].name] = true;
}
}
Ici: https://stackblitz.com/edit/angular-twlvwd
Il y en a beaucoup des choses qui pourraient être améliorées. Vous devriez envisager de refactoriser votre code lorsque vous en avez le temps.
Pourriez-vous l'appliquer dans mon blitz de pile
Cela fonctionne dans votre StackBlitz:
Voir: https://stackblitz.com/edit/ angular-rtzkhd
constructor(){
this.uploader.onAfterAddingAll = () => {
this.selectedFilesArray = [];
this.uploader.queue.forEach(fileItem => {
this.fileSelectState[fileItem.file.name] = true;
});
}
}
Et comment décocher tous les fichiers?
vous décocheriez tout par: this.fileSelectState = {} ou un par un avec this.fileSelectState [fileItem.file.name] = false;
pourriez-vous mettre à jour l'URL du blitz de pile à nouveau, celle ci-dessus est expirée
Vous n'avez rien fait avec fileSelectState . C'est pourquoi votre code ne fonctionne pas.
Et aussi la méthode selectAllFiles () ne fonctionne que lorsque vous modifiez la valeur.
Donc, ce que vous devez faire est d'écrire une fonction pour l'entrée vérifiée,
public checked(item:any):boolean{
console.log(item)
//relevant logic
return true;
}
alors vous pouvez donner la logique que vous voulez,
<input type="checkbox" class="form-check-input" value="{{item?.file?.name}}" [checked]="checked(item)"
pour l'instant je viens de retourner vrai. https://stackblitz.com/edit/angular- hshhge? file = src% 2Fapp% 2Fapp.component.html
J'ai des fonctionnalités qui en dépendent [vérifié] = "fileSelectState [item? .file? .name]" donc pourquoi je ne l'ai pas supprimé
@Dexter est une variable. alors comment pouvez-vous dire que vous avez une fonctionnalité? et vous n'y avez rien assigné? comment ça marche?
en utilisant cette variable, seule mon application Web a des fonctionnalités internes comme if (this.fileSelectState [fileName] == undefined) this.fileSelectState [fileName] = ''; for (var k dans this.fileSelectState) {if (k! == fileName) this.fileSelectState [k] = false; sinon this.fileSelectState [k] = true; }}
vous mettez la case à cocher dans
@ABOS oui si je laisse tomber plus d'un fichier, il sera visible et s'il est inférieur à une seule case à cocher
@Dexter, pourriez-vous soit 'accepter' une réponse, soit expliquer ce qui ne fonctionne pas pour vous. TBH je cherchais les 50pts .. :)