如何将选项元素的值设置为排序？答案

【问题标题】：How do I set the value of option element to the ordering?如何将选项元素的值设置为排序？
【发布时间】：2018-11-01 14:43:34
【问题描述】：

我有一个选择元素，我用数据库中的 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：我最终想知道表单提交后我的打字稿文件中所选元素的索引，因为我还有另一个数组与 options 列表一一对应。

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

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

但这不起作用（说没有这样的属性）。

我也试过这个：

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

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

【问题讨论】：

查看我的更新答案以获取工作示例

标签： html angular typescript

【解决方案1】：

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

我在这里为您创建了一个示例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>

【讨论】：

【解决方案2】：

您可以像这样在ngFor 中获取索引：

*ngFor="let fruit of fruits; let i = index"

然后您可以使用设置值

<option [value]="i">{{fruit}}</option>

【讨论】：

【解决方案3】：

试试这个方法

<select name="fruitsOption" ngModel #fruitRef="ngModel (change)="log(fruitRef.value)">
  <option *ngFor="let fruit of fruits;let i = index" [value]="i">{{fruit}}</option>
</select>

{{fruitRef.value}}

demo

我添加了(change)="log(fruitRef.value)" 和{{fruitRef.value}} 只是为了测试

【讨论】：