离子选择不显示 FormBuilder 的选定选项（Ionic 3）答案

【问题标题】：ion-select not showing selected option with FormBuilder (Ionic 3)离子选择不显示 FormBuilder 的选定选项（Ionic 3）
【发布时间】：2017-09-26 15:05:24
【问题描述】：

取下面的html

  <form [formGroup]="detailsForm">

  <ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select formControlName="gaming">
      <ion-option value="nes">NES</ion-option>
      <ion-option value="n64">Nintendo64</ion-option>
      <ion-option value="ps">PlayStation</ion-option>
      <ion-option value="genesis">Sega Genesis</ion-option>
      <ion-option value="saturn">Sega Saturn</ion-option>
      <ion-option value="snes">SNES</ion-option>
    </ion-select>
  </ion-item>
  </ion-list>

  </form>

在你的组件中

this.detailsForm = this.formBuilder.group({
      gaming:['nes',Validators.required]
    });

我希望在加载视图时看到“NES”作为选定选项。但是，它没有出现。如果您改为使用 [(ngModel)] 它将起作用。

是我做错了什么，还是最近的 ionic 更新导致了这个问题？

任何帮助都会很棒。

【问题讨论】：

标签： javascript angular ionic2 ionic3

【解决方案1】：

这是我解决这个问题的方法（因为它仍在 Ionic 3.5.0 中发生）：

<ion-select class="form-select" 
            [selectOptions]="stateOptions"
            [(ngModel)]="state" 
            [ngModelOptions]="{standalone: true}"
            (ionChange)="stateChanged(state)" (click)="onSelectClicked()">
  <ion-option *ngFor="let state of states">{{state}}</ion-option>
</ion-select>

以及对应的TypeScript：

public onSelectClicked (): void {
  const options: HTMLCollectionOf<Element> = document.getElementsByClassName('alert-tappable alert-radio')
  setTimeout(() => {
    let i: number = 0
    const len: number = options.length
    for (i; i < len; i++) {
      if ((options[i] as HTMLElement).attributes[3].nodeValue === 'true') { // This is the selected option
        options[i].scrollIntoView({block: 'end', behavior: 'smooth'})
      }
    }
  }, 500) // Leave enough time for the popup to render
}

【讨论】：

【解决方案2】：

我不知道是否有办法使用表单，但我一直在使用 ng-model，它工作得很好。

看下面的代码：

<ion-list>
    <ion-item>
        <ion-label>Gaming</ion-label>
        <ion-select [(ngModel)]=gaming>
            <ion-option value="nes">NES</ion-option>
            <ion-option value="n64">Nintendo64</ion-option>
            <ion-option value="ps">PlayStation</ion-option>
            <ion-option value="genesis">Sega Genesis</ion-option>
            <ion-option value="saturn">Sega Saturn</ion-option>
            <ion-option value="snes">SNES</ion-option>
        </ion-select>
    </ion-item>
</ion-list>

并在 .ts 文件中通过调用将游戏声明为全局变量 this 在构造函数之前

public gaming: any;

然后插入值

$scope.gaming=['nes'];

这应该可以正常工作。

【讨论】：

【解决方案3】：

这只是 3.1 的问题。它要么是传递整个事件与过去的值相比的重大变化，要么与在用户交互之前组件加载时触发ionChange 有关（或第一件事导致第二件事）。暂时使用 3.0。

【讨论】：