ngModel 指令不适用于所选选项

Question

我的 ionic 2 应用程序上有一个非常简单的表单。代码如下：

<form #f="ngForm" (ngSubmit)="onBuscar(f)">
<ion-item>
<ion-label>Ano/Mês</ion-label>
<ion-select
name="ano"
ngModel
required
okText="Confirmar"
cancelText="Cancelar"
>
<ion-option *ngFor="let ano of anos" value="{{ano}}" selected="{{ano==ano_atual}}">
{{ano}}
</ion-option>
</ion-select>
<ion-select
name="mes"
ngModel
required
okText="Confirmar"
cancelText="Cancelar"
>
<ion-option *ngFor="let mes of meses; let i = index" value="{{i + 1}}" selected="{{i==mes_atual}}">
{{mes}}
</ion-option>
</ion-select>
</ion-item>
</form>

问题是：当我放置"ngModel"指令时，我默认选择的选项遇到了一些问题。没有它，它可以正常工作。但是，在提交表单时，我需要它来获取组件上的表单值。有什么想法可以解决吗？

Answer 1

这不是ngModel应该使用的方式。假设ano_atual是要保存所选值的组件中的属性，则可以执行以下操作：

<ion-select name="ano" [(ngModel)]="ano_atual" required okText="Confirmar" cancelText="Cancelar">
<ion-option *ngFor="let ano of anos" value="{{ano}}">
{{ano}}
</ion-option>
</ion-select>

请注意，您不需要selected属性，因为由于ngModel指令，将选择与ano_atual属性具有相同值的选项。