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

Posted 2023-03-13

【中文标题】HTML：在表格的单元格中创建一个下拉列表

【英文标题】：HTML : Create a dropdown in cell of table

【发布时间】：2020-10-23 00:11:16

【问题描述】：

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

一些数据 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>

【参考方案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;

【参考方案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);

【讨论】：

谢谢，它正在显示列表，但我无法从列表中选择任何值

我不清楚要求，但我正在编辑我的答案。如果您明确说明您想对所选值做什么，我可以提供更多帮助

从下拉列表中选择的值应该在表格的单元格中可见。