Angular 8 ngFor - 如何获取行 ID

Question

我的代码：

    <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);
  }

我的代码有什么问题？

Answer 1

请修改您的模板如下：

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

对于您的更新和 cmets，还要注意您的 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();
  }

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

Answer 2

您的*ngFor 错误。你必须在最后调整你的index：

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