Angular 角材料阻力；拖放-重复主框图像

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

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

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

目标是选择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);
  }

文件：任意；
URL=新数组（）；
检测文件（事件）{
this.files=event.target.files；
if（this.files.length<7）{
for（让此.files的文件）{
let reader=new FileReader（）；
reader.onload=（e:any）=>{
this.url.push（例如target.result）；
}
reader.readAsDataURL（文件）；
}
}
}
drop（事件：CdkDragDrop）{
moveItemInArray（this.url、event.previousIndex、event.currentIndex）；
}

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

html:

上传文件
点击上传

ts:

drop（事件：CdkDragDrop）{
moveItemInArray（this.url、event.previousIndex、event.currentIndex）；
}

---

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

html:

上传文件
点击上传

ts:

drop（事件：CdkDragDrop）{
moveItemInArray（this.url、event.previousIndex、event.currentIndex）；
}

---

因此，每次尝试将图像放入大框或第一个小框时，图像都会设置为大框。 要处理这个问题，您需要在Html端创建URL索引，并使用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>

上传文件
点击上传

---

因此，每次尝试将图像放入大框或第一个小框时，图像都会设置为大框。 要处理这个问题，您需要在Html端创建URL索引，并使用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>

上传文件
点击上传

---

您需要检查整个框，而不仅仅是图像（删除白色框）。您是对的，他离开了框空间，只是没有显示图像。这个解决方案的问题是，它创建了一个新的框，其图像与大框相同，与post图像中描述的问题相同。如果你知道如何解决这个问题，我将不胜感激。我编辑了我的解决方案来处理这个问题，你需要在图像之前添加div，比如@SafwanMh建议你需要检查整个框，而不仅仅是图像（删除白框）。你是对的，他离开了框空间，只是没有显示图像。这个解决方案的问题是，它创建了一个新的框，其图像与大框相同，与post图像中描述的问题相同。如果您知道如何解决此问题，我将非常感谢itI编辑了我的解决方案来处理此问题，您需要在图像之前ngi div，如@SafwanMh proposedIt没有这样工作，它仍然提供白色间距，因此您无法将大方框图像与小方框图像交换：（你可以访问我的stackblitz pls link现在唯一的问题是它无法将图像与大盒子交换。看看这是否对你有效。他将小盒子的图像与大盒子交换，但并不总是如此，我不知道为什么如此奇怪，我选择了3个图像，我可以轻松地在小盒子之间切换位置，但如果你想与t交换大的一个，什么也没有发生：（它不是那样工作的，它仍然提供白色间隔，所以你不能用小的图像交换大的框图像：（你可以访问我的stackblitz pls link现在唯一的问题是它无法将图像与大盒子交换。看看这是否对你有效。他将小盒子的图像与大盒子交换，但并不总是如此，我不知道为什么如此奇怪，我选择了3个图像，我可以轻松地在小盒子之间切换位置，但如果你想与t交换他是个大人物，什么都没发生：(

<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>