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

Question

我正在使用 Angular 4 Reactive Forms 創建下拉菜單

<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' 所以每當你選擇值 console.log() 就會發生，因此不需要添加 onChange 事件

也可以代替 [ngValue]，您可以直接提供 [value] 並且您在此處定義的任何值都將記錄更改

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>