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

我的价值看起来像这样

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

我怎么才能得到这个价值？似乎ngValue将索引AND值放在value参数中.

Answer 1

由于您正在处理changeDOM事件,因此该参数$event是DOM提供的Event对象,而不是设置的选项的值ngValue.

如果您处理了ngModelChangeAngular事件,则参数$event将是该选项的值.ngModel如果只需要type在组件类中设置值,也可以使用双向绑定.

以下是各种选项.你可以在这个stackblitz中尝试它们.

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

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

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

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

3. 处理ngModel和ngModelChange单独处理(如果进行更多处理selectType):

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