Currently, I am working with a table that dynamically creates rows containing details of uploaded files. Each row includes a dropdown menu for selecting the file type.
The issue I am encountering is with the dynamically generated dropdown menus. If I select a value in one dropdown, it sets the same value for all dropdowns in all rows.
Here is the HTML code:
<table>
<thead>
<tr>
<th>File Name</th>
<th>File Type</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of uploader.queue">
<td>
{{ item?.file?.name }}
</td>
<td>
<mat-form-field>
<mat-select placeholder="Select File Type" [(ngModel)]="selectedType">
<mat-option *ngFor="let type of Types" [value]="type.type">
{{type.type}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
<td>
<button (click)="AddPdf(item)">Upload</button>
</td>
</tr>
</tbody>
<table>
In my TypeScript file:
public AddPdf(Filenames: FileItem) {
this.data = { filename: FileNames.file.name.toString() , LetterName:this.selectedLetterName, LetterType: this.selectedType };
console.log(this.data.filename, 'File Name');
console.log(this.data.LetterName, 'Letter Name');
console.log(this.data.LetterType, 'Letter Type');
}
When I add three files, three rows are generated. However, if I choose the file type for one row, it applies to all rows. I need help understanding and fixing this issue!
Your assistance will be greatly appreciated.