Question

我有一个select元素，正在数据库中填充s。所以代码看起来像这样：

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

我需要将选项的 value 属性设置为其索引。例如，如果列表为Mango，Apple，Orange，则* ngFor之后的净效果将如下所示：

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

有没有办法做到这一点？

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

我已经在打字稿文件中尝试过此操作

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

但这是行不通的（说没有这种属性）。

我也尝试过：

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

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

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

Answer 2

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

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

然后您可以使用设置值

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

Answer 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}}只是用于测试

如何将option元素的值设置为排序？

3 个答案: