Angular4-獲取“未定義”而不是下拉所選值

Question

首先，我應該說我經歷​​了所有針對類似問題而發布的答案，但是沒有一個對我有用！ 確實很奇怪，因為代碼看起來還可以，但是在更改事件中它始終給我未定義的信息！

我嘗試了這個：

<select name="countries" id="countries" [(ngModel)]="selectedCountry" (change)="onCountryChange()">                            
    <option *ngFor="let x of countries" [ngValue]="x">{{x.CouName}}</option>
</select>

在我的組件中

 selectedCountry: any[];

 onCountryChange() {  
    console.log(this.selectedCountry);//Give me undefined      
}

我也試過這個：

<select name="countries" id="countries" (change)="onCountryChange($event.target.value)">                            
    <option *ngFor="let x of countries" [ngValue]="x">{{x.CouName}}</option>
</select>

這個也給我不確定

onCountryChange(value) {  
    console.log(value);//Give me undefined      
}

Answer 1

采用

(ngModelChange)="onCountryChange($event)"

代替

(change)="onCountryChange()"

(change)是在燒制之前[(ngModel)]="..."結合被更新。

Answer 2

這是角度的已知問題。

Select change event occurs before ngModel updates

您應該從(change)為(ngModelChange)

<select name="countries" id="countries" [(ngModel)]="selectedCountry" (ngModelChange)="onCountryChange(selectedObj)">                            
    <option *ngFor="let x of countries" [ngValue]="x">{{x.CouName}}</option>
</select>

演示