angular - ngValue 返回索引和值

Question

使用 [ngValue] 从选择返回的值是索引和值的串联

如果我用这个

<select (change)="selectType($event)" name="type" >
    <option *ngFor="let type of types" [ngValue]="type.value" >{{type.display}}</option>
</select>

然后我用它来获取所选选项的值

selectType (e) {
    this.type = e.target.options[e.target.selectedIndex].value;
}

我的值(value)观是这样的

0: type1
1: type2
2: type3
...

我怎样才能得到值(value)？似乎 ngValue 将索引和值放在值参数中。

Answer 1

由于您正在处理 change DOM 事件，因此参数 $event 是 Event object由 DOM 提供，而不是使用 ngValue 设置的选项的值。

如果您改为处理 ngModelChange Angular 事件，则参数 $event 将是该选项的值。如果您只需要在组件类中设置 type 的值，您也可以使用 ngModel 的双向绑定(bind)。

这里有各种选项。您可以在 this stackblitz 中试用它们.

1. 将事件目标的值传递给 selectType:

    <select (change)="selectType($event.target.value)" name="type">

1. 使用 ngModel(不使用 selectType)设置双向绑定(bind)的值:

    <select [(ngModel)]="type" name="type">

1. 分别处理 ngModel 和 ngModelChange(如果在 selectType 中完成更多处理):

    <select [ngModel]="type" (ngModelChange)="selectType($event)" name="type">