HTML : Create a dropdown in cell of table - html

Question

I want to create a table in which one of the cell works as dropdown.
Some data data.field is coming from backend. I want to show it at time of rendering.
Now a fList is also coming from backend, so when someone click of the cell it should open that list as dropdown. I added the below code but it is not showing any dropdown.
<tr class="dropdown" *ngFor="let data of dataList | dataPipe">
<td class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{data.field}}
<ul class="dropdown-menu" *ngFor="let f of fList">
<li>{{f}}</li>
</ul>
</td>
</tr>

Answer 1

actually you need to loop on dropdown values not dropdown menu
in your case dropdown values are <li>
try this
<tr class="dropdown" *ngFor="let data of dataList | dataPipe">
<td class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{data.field}}
<ul class="dropdown-menu">
<li *ngFor="let f of fList" (click)="checkValue(f)">{{f}}</li>
</ul>
</td>
</tr>
in your .ts file
public checkValue(value){
console.log(value)
alert(value)
}
this can be a better approach
<select (change)="onChange($event.target.value)">
<option *ngFor="let f of fList">{{f}}</option>
</select>
onChange(value) {
console.log(value);
}

Answer 2

If you want to update the table cell with selected value from dropdown:
<tr class="dropdown" *ngFor="let data of dataList | dataPipe; let i = index;">
<td class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{data.field}}
<td class="btn btn-primary dropdown-toggle" type="button" data-
toggle="dropdown">{{data.field}}
<ul class="dropdown-menu">
<li *ngFor="let f of fList" (click)="onSelect(f, i)">{{f}}</li>
</ul>
</td>
</td>
onSelect(selectedValue, index){
this.dataList[index].field=selectedValue;
}