Angular 8 ngFor - 如何获取行 ID
Angular 8 ngFor - how to get row 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);
}
我的代码有什么问题?
你的*ngFor
错了。你必须在最后调整你的 index
:
<div class="row" *ngFor="let evidence of evidences; let i = index">
请按如下方式修改您的模板:
<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();
}
事实上,通过这些更改,您可以删除 uploadFile
函数中的 index
参数。
我的代码:
<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);
}
我的代码有什么问题?
你的*ngFor
错了。你必须在最后调整你的 index
:
<div class="row" *ngFor="let evidence of evidences; let i = index">
请按如下方式修改您的模板:
<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();
}
事实上,通过这些更改,您可以删除 uploadFile
函数中的 index
参数。