Html 如何将option元素的值设置为ordering？

我有一个select元素，我用数据库中的s填充它。 因此，代码如下所示：

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

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

但这是行不通的（说没有这样的财产）

我也试过：

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

{{fruits[i]}

---

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

ngFor

中获得索引，如下所示：

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

然后可以使用

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

{{fruit}

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

我在这里为您创建了一个示例

这是你的模板中应该包含的内容的副本

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

{{水果}

试试这种方法

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

---

查看我的更新答案以了解工作示例
<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}}