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

这是angular的一个已知问题。

<强> 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>

<强> DEMO

Angular4 - 获取“未定义”而不是下拉选择值

2 个答案: