Angular 4 - 在下拉列表中找到选定的值

Question

我正在使用 Angular 4 个响应式表单来创建下拉菜单

<select id="city" formControlName="city" (change)="onCitySelect($event)" >
    <option *ngFor="let city of cities" [ngValue]="city" >
        {{ city }} 
    </option>
</select>

当在下拉列表中选择一个值时，我想调用一个方法并显示所选值。

这是我执行此操作的代码

onCitySelect(event) {
    console.log(event.target.value);
}

我原以为它会打印下拉列表中显示的城市名称。但是，它似乎也显示索引号。例如，

2: London

而不是仅 London 实际显示在下拉列表中。

如何在没有索引的情况下获取城市名称？

Answer 1

如果您有一个字符串或数字作为选项值并且不想使用 [(ngModel)]="...".

，请使用 [value] 而不是 [ngValue]

不过，对于对象值，您始终应该使用 [ngValue]。

Answer 2

由于您使用的是Angular 4 Reactive Forms，您可以进行如下操作：

假设您在组件的打字稿文件中有此声明：

export class myComponent{
    myForm: FormGroup;

    ngOnInit(){
        this.myForm = new FormGroup({
            city: new FormControl('', Validators.required)
        }
    }

    onCitySelect($event:any){
        console.log(this.myForm.controls["city"].value);
    }
}

因此您可以使用：this.myForm.controls["city"].value 访问 city 的选定值。

Answer 3

您可以订阅 formControl 以在值更改时触发函数，从而消除此问题

(change)="onCitySelect($event)"

你可以做到

this.myForm.get('city').valueChanges.subscribe(value=>{
     console.log(value);
})

其中 'myForm' 是您的 formGroup，它具有 formControl 'city' 所以每当你 select 值 console.log() 就会发生因此不需要添加 onChange 事件

您也可以直接提供 [value] 而不是 [ngValue]，您在此处定义的任何值都将记录更改

Answer 4

最简单的解决方案：

<select (change)="methodToCall($event.target.value)">
                            <option value="" selected>Please select account</option>
                            <option *ngFor='let details of someInformation?.thatIhave'
                                value={{details?.hNum}}>{{details?.hNum}}</option>
                        </select>

Angular 4 - 在下拉列表中找到选定的值

Angular 4 - find selected value in dropdown

angular

drop-down-menu

selectedvalue

angular-reactive-forms