只显示第一个选项的角度HTML选择表单

Question

伙计们，我有一个非常简单的片段

<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1"  (change)="onChooseMenuItem($event.target.value)">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>

当我做出选择时，它总是显示我选择的第一个选项。假设ngrxMenuItems是一个具有[1，2，4]的数组。无论你做出什么选择，它都只会向你展示第一个选择。

我尝试过的：-删除(change(="onChooseMenuItem($event.target.value("，并在每行上将其替换为(click(事件-尝试ngIf选项

我认为它是：=一些我不知道的角度行为。

Answer 1

这里的主要问题是(change)="onChooseMenuItem($event.target.value)，原因是$event发出的事件上不存在target属性，您需要像一样处理ts方法中的值部分

Html

<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1"  (change)="onChooseMenuItem($event)"> <!-- Change the (change) event emitter -->
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>

Ts

onChooseMenuItem(event: any){
const value = event.target.value;
console.log(value);
}

Answer 2

您不将组件中的值绑定到您的选择。因此select不知道要选择哪个值作为选项的实际值。

您必须将ngModel添加到您的选择中：

<select class="form-control" id="exampleFormControlSelect1" [(ngModel)]="select1">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>

"select1"是组件中的一个变量，包含有关所选选项的信息。