Question

我目前正在开展一个小角度项目，并且输入事件存在问题。

我有以下代码：

<select (change)="onSelect($event.target.value)" >   
    <option *ngFor="let option of options" [value]="option.id">{{option.name}}</option> 
</select>

这很好用。但我想把它改成以下：

<select (change)="onSelect($event.target.value)" [(ngModel)]="selectedItem">
    <option *ngFor="let option of options" [value]="option.id">{{option.name}}</option>
</select>

此后，不再触发更改事件。我还尝试了[ngModel]和（ngModelChange）等等。但只要有一些东西与ngModel及其中的绑定，事件就不再触发了。

我的所有Angular内容都在版本5.1.2中，即1.6.2中的CLI

有谁知道为什么Angular有这种行为？问候，谢谢。

Answer 1

它可以像这样工作：

<select type="number" [(ngModel)]="selectedItem" >
  <option *ngFor="let option of options" [ngValue]="option.id">{{option.name}}</option>
</select>

这是有效的plnkr希望它解决你的问题兄弟：）

Answer 2

使用 ngModelChange

绑定值时，您应该使用 ngModel

<select (ngModelChange)="onSelect($event.target.value)" [(ngModel)]="selectedItem">
    <option *ngFor="let option of options" [value]="option.id">{{option.name}}</option>
</select>

Answer 3

你可以试试这个：

<select type="number" [(ngModel)]="selectedItem" >
  <option *ngFor="let option of options" (click)=“selectedItem(option)” [ngValue]="option.id">{{option.name}}</option>
</select>

在component.ts中 -

optionSelected: any;
selectedItem(option: any) {
if (option) {
 this.optionSelected = option;
} else { 
 this.optionSelected = ‘’;
}
}

然后你可以根据你的需要使用this.optionSelected ..

不使用ngModel绑定触发角度输入事件

3 个答案: