HTML：在表格的单元格中创建一个下拉列表

Question

我想创建一个表格，其中一个单元格用作下拉列表。

一些数据 data.field 来自后端。我想在渲染时显示它。

现在 fList 也来自后端，因此当有人单击单元格时，它应该将该列表作为下拉列表打开。我添加了以下代码，但它没有显示任何下拉菜单。

 <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

如果您想使用下拉列表中的选定值更新表格单元格：

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

Answer 2

实际上你需要循环下拉值而不是下拉菜单 在您的情况下，下拉值为<li> 试试这个

<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>

在你的.ts file

public checkValue(value){
console.log(value)
alert(value)
}

这可能是一个更好的方法

<select (change)="onChange($event.target.value)">
    <option *ngFor="let f of fList">{{f}}</option>
</select>

onChange(value) {
    console.log(value);
}