角度材料拖放 - 重复主框图像

Question

实现了一个选择图像并在框中预览图像的功能。

目标是使它们可拖动，以便对它们进行排序。

我的问题是，当选择多个图像时，它会在其中一个小框中重复大框图像，你能删除它吗？

目标是选择3个图像并获得3个图像的预览，然后如果你想将图像从小框拖动到大框，我会更改它们的位置。

html

<div class="drop">
<div class="cont" *ngIf="urls.length === 0">
<div class="browse" >
Upload files
</div>
<div class="desc">
Click to upload
</div>       
</div>
<div *ngIf="urls.length > 0" cdkDropList  (cdkDropListDropped)="drop($event)">
<img [src]="urls[0]" cdkDrag>
</div>
<input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>
<div class="row" cdkDropList  (cdkDropListDropped)="drop($event)">
<div class="Upcard" *ngFor="let url of urls" cdkDrag>
<img [src]="url">
</div>
</div>

组件.ts

files:any;
urls = new Array<string>();
detectFiles(event) {
this.files = event.target.files;
if (this.files.length < 7) {
for (let file of this.files) {
let reader = new FileReader();
reader.onload = (e: any) => {
this.urls.push(e.target.result);
}
reader.readAsDataURL(file);
}
}
}
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.urls, event.previousIndex, event.currentIndex);
}

Answer 1

解决方案是首先制作一个图像，并在下拉列表中设置相同的div：

html:

<div class="drop" *ngIf="urls.length === 0">
<div class="cont">
<div class="browse">
Upload files
</div>
<div class="desc">
Click to upload
</div>
</div>
<input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>

<div cdkDropList (cdkDropListDropped)="drop($event)">
<div *ngFor="let url of urls; let i = index">
<div *ngIf="i === 0" class="drop">
<img [src]="url" cdkDrag>
<input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>
<div class="Upcard" *ngIf="i !== 0">
<img [src]="url">
</div>
</div>
</div>

ts:

drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.urls, event.previousIndex, event.currentIndex);
}

Stacklitz

Answer 2

因此，每次尝试将图像放入大框或第一个小框时，图像都会设置为大框。要处理此问题，您需要在Html侧创建urls的索引，并使用ngIf指令检查索引是否不等于0。

就像

<div class="drop">
<div class="cont" *ngIf="urls.length === 0">
<div class="browse" >
Upload files
</div>
<div class="desc">
Click to upload
</div>       
</div>
<div *ngIf="urls.length > 0" cdkDropList  (cdkDropListDropped)="drop($event)">
<img [src]="urls[0]" cdkDrag>
</div>
<input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>
<div class="row" cdkDropList  (cdkDropListDropped)="drop($event)">
<div *ngFor="let url of urls; let i = index">
<div *ngIf="i !== 0" class="Upcard" cdkDrag>
<img [src]="url">
</div>