如何将select选项中的值绑定到将要上载的文件

Question

UI包含文档选项，用户将从中选择一个选项。我想将fileType绑定到将通过输入标签上传的图像。我通过ngValue从下拉列表中获取所选文档的值，但无法将其与上传的图像绑定

app.component.html

<div class="document-upload row">
<div class="col-2">
<img id="uploaded-document" src="" alt="">
</div>
<div class="col-7">
<p class="text-white">Images should be in JPG, JPEG and PNG formats only.</p>
<select formControlName="document" id="upload-input" class="form-select text-white" aria-label="Default select example">
<option value="" selected>Select Documents</option>
<option [ngValue]='documents.fileType' *ngFor="let documents of documentsData">{{documents.fileName}}</option>
</select>
</div>
<div class="upload-btn col">
<input id="File" type="file" #docUpload>
<button type="button" class="btn bg-white" (click)="docUpload.click()">Upload</button>
</div>
</div>

应用程序组件.ts

this.documentsData = [{
fileType : 1, 
fileName : 'Aadhar Card'
}, 
{
fileType : 2,
fileName : 'Pan Card'
},
{ 
fileType : 3,
fileName : 'Education'
},
{
fileType : 4,
fileName : 'Employee Photo'      
}]

Answer 1

我自己使用模板变量来访问通过ngValue存储的值。然后将相同的值传递给使用模板变量作为引用的函数。

app.component.html

<div class="document-upload row">
<div class="col-2">
<img id="uploaded-document" src="" alt="">
</div>
<div class="col-7">
<p class="text-white">Images should be in JPG, JPEG and PNG formats only.</p>
<select #fileType formControlName="document" id="upload-input" class="form-select text-white" aria-label="Default select example">
<option value="" selected>Select Documents</option>
<option [ngValue]='documents.fileType' *ngFor="let documents of documentsData">{{documents.fileName}}</option>
</select>
</div>
<div class="upload-btn col">
<input id="File" type="file" #docUpload>
<button type="button" class="btn bg-white" (click)="[docUpload.click(),documentUpload (fileType.value)]">Upload</button>
</div>
</div>