时间戳

首页 > 解决方案 > Angular 8 ngFor - 如何获取行 ID

angular - Angular 8 ngFor - 如何获取行 ID

问题描述

我的代码：

    <div class="row" *ngFor="let evidence of evidences, index as i">
            <div class="col">
              {{i}}
              <input type='file' id="file" style="display:none" (change)="uploadFile(i, $event)">
              <button (click)="browseFile()" style="float: left; border: none">Choose file</button>
            </div>
            <div class="col">
            </div>
<div class="col">
          <button pButton type="button" icon="pi pi-times"
                  class="ui-button-danger action remove" (click)="onDeleteEvidence(i)"></button>
        </div>
    </div>

我想上传文件并在特定行中显示文件名，但是每次上传文件时，无论 div 行如何，我的方法都会得到 index = 0 ：

uploadFile(index: number, event) {
    console.log(index); // always 0 !!!
    this.fileToUpload = event.target.files.item(0);
    this.evidences[index] = {file: this.fileToUpload, publishedDate: new Date(), docTagId: 234} as IEvidence;
  }


onDeleteEvidence(index: number) {
console.log(index); //works correctly!
    this.evidences.splice(index, 1);
  }

  browseFile() {
    document.getElementById('file').click();
  }

fileExists(evidence: IEvidence): boolean {
    return !(evidence.file === undefined || evidence.file === null);
  }

我的代码有什么问题？

标签： angularngfor

解决方案

请按如下方式修改您的模板：

<div class="row" *ngFor="let evidence of evidences; let i = index">

对于您的更新和评论，还要注意您的browseFile功能，问题就在那里：您通过 id 获取文件，但所有文件都具有相同的 id。尝试类似：

<input type='file' id="file{{i}}" style="display:none" (change)="uploadFile(i, $event)">
<button (click)="browseFile(i)" style="float: left; border: none">Choose file</button>

和：

browseFile(i) {
    document.getElementById('file'+i).click();
  }

事实上，通过这些更改，您可以摆脱函数index中的参数uploadFile。

推荐阅读