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>

演示