时间戳

首页 > 解决方案 > 如何将选项元素的值设置为排序？

html - 如何将选项元素的值设置为排序？

问题描述

我有一个选择元素，我用数据库中的 s 填充。所以代码看起来像这样：

<select name="fruitsOption" id="fruitsOptionId" ngModel #fruitRef="ngModel">
  <option *ngFor="let fruit of fruits">{{fruit}}</option>
</select>

我需要将option的value属性设置为它们的索引。例如，如果列表是 Mango、Apple、Orange，*ngFor 之后的净效果将是这样的：

<option value="0">Mango</option>
<option value="1">Apple</option>
<option value="2">Orange</option>

有没有办法做到这一点？

PS：我最终想知道表单提交后我的打字稿文件中所选元素的索引，因为我还有另一个数组与选项列表一一对应。

我在我的打字稿文件中试过这个：

i = document.getElementById("fruitOptionsId").selectedIndex

但这不起作用（说没有这样的财产）。

我也试过这个：

<option *ngFor="let i in fruits" value="i">{{fruits[i]}}</option>

但这会引发错误“无法绑定到 ngForIn”或类似的错误

标签： htmlangulartypescript

解决方案

您需要在循环上有一个索引，然后将该值设置在值标签中...

我在这里为您创建了一个示例https://stackblitz.com/edit/angular-icfc1n

这是您的模板中应包含的内容的副本。

<select name="fruitsOption" id="fruitsOptionId" ngModel #fruitRef="ngModel">
  <option *ngFor="let fruit of fruits; let i = index;" value="{{i}}">{{fruit}}</option>
</select>

推荐阅读