ngFor循环不正确-将值添加到每一行，作为特定行的姿势

Question

我试图在我的HTML模板中显示数组中的数据，但是我的循环不能正常工作。我的代码会更好地解释它。

下面是一个stackblitz示例：https://stackblitz.com/edit/ngx-dropzone-mg6mrz

<div class="flex-grid padding-5" *ngFor="let f of files_dropped">
  <div class="row">
    <div class="col">
      <ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" [file]="f" [removable]="true" (removed)="onRemove(f)">
      </ngx-dropzone-image-preview>
    </div>
    <div class="col">
      <div class="row equal">
        <div class="col justify"><ngx-dropzone-label>{{ f.name }}</ngx-dropzone-label></div>
        <div class="col justify"><ngx-dropzone-label>{{ f.type }}</ngx-dropzone-label></div>
        <div class="col justify"><ngx-dropzone-label>{{ f.size }}</ngx-dropzone-label></div>
      </div>
      <div class="row equal" *ngFor="let d of dimensions">
        <div class="col justify"><ngx-dropzone-label>{{ d.width }}</ngx-dropzone-label></div>
        <div class="col justify"><ngx-dropzone-label>{{ d.height }}</ngx-dropzone-label></div>
      </div>
    </div>
  </div>
</div>


onSelect(event) {
  const ctx = this;
  const dim = this;
  dim.dimensions = [];
  ctx.files_dropped.push(...event.addedFiles);
  const formData = new FormData();
  for (var i = 0; i < ctx.files_dropped.length; i++) {
    
    formData.append("file[]", ctx.files_dropped[i]);
    const reader = new FileReader();
    reader.addEventListener("load", function () {
      const img = document.createElement("img") as HTMLImageElement;
      img.onload = () => {
        console.log(img.naturalWidth, img.naturalHeight);
        dim.dimensions.push({"width": img.naturalWidth, "height": img.naturalHeight});
      }
      img.src = reader.result as string;
    }, false);
    
    reader.readAsDataURL(ctx.files_dropped[i]);
    console.log(ctx.files_dropped);
  }
}

因此，基本上这就是正在发生的事情。循环将dim.dimensions添加到每个图像行。每次我添加新图像时，它都会将新维度添加到所有图像行中。200宽，200高应该存在于第一张图像中，而不是第二张。553宽，550高应该存在于第二个图像中，而不是第一个图像中。有什么想法吗?请

​

​

Answer 1

您需要获取文件的维度。因此，我删除了维度迭代并从files_dropped迭代中获取索引，以将其用于获取每个文件的维度。

    <div class="custom-dropzone" ngx-dropzone  (change)="onSelect($event)">
      <ngx-dropzone-label>
        <div>
          <h2>Drop your files here</h2>
        </div>
      </ngx-dropzone-label>
    </div>

    <div class="flex-grid padding-5" *ngFor="let f of files_dropped let i = index">
      <div class="row">
        <div class="col">
          <ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" [file]="f" [removable]="true" (removed)="onRemove(f)">
          </ngx-dropzone-image-preview>
        </div>
        <div class="col">
          <div class="row equal">
            <div class="col justify"><ngx-dropzone-label>{{ f.name }}</ngx-dropzone-label></div>
            <div class="col justify"><ngx-dropzone-label>{{ f.type }}</ngx-dropzone-label></div>
            <div class="col justify"><ngx-dropzone-label>{{ f.size }}</ngx-dropzone-label></div>
          </div>
          <div class="row equal">
            <div class="col justify"><ngx-dropzone-label>{{ dimensions[i].width }}</ngx-dropzone-label></div>
            <div class="col justify"><ngx-dropzone-label>{{ dimensions[i].height }}</ngx-dropzone-label></div>
          </div>
        </div>
      </div>
    </div>

Answer 2

<div class="flex-grid padding-5" *ngFor="let f of files_dropped; let i = index">
      <div class="row">
        <div class="col">
          <ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" [file]="f" [removable]="true" (removed)="onRemove(f)">
          </ngx-dropzone-image-preview>
        </div>
        <div class="col">
          <div class="row equal">
            <div class="col justify"><ngx-dropzone-label>{{ f.name }}</ngx-dropzone-label></div>
            <div class="col justify"><ngx-dropzone-label>{{ f.type }}</ngx-dropzone-label></div>
            <div class="col justify"><ngx-dropzone-label>{{ f.size }}</ngx-dropzone-label></div>
          </div>
          <div class="row equal">
            <div class="col justify"><ngx-dropzone-label>{{ dimensions[i].width }}</ngx-dropzone-label></div>
            <div class="col justify"><ngx-dropzone-label>{{ dimensions[i].height }}</ngx-dropzone-label></div>
          </div>
        </div>
      </div>
    </div>