ion-select 不显示 selected 选项与 FormBuilder (Ionic 3)

Question

采取以下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 更新导致了这个问题？

任何帮助都会很棒。

Answer 1

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

Answer 2

这是我解决这个问题的方法（因为它仍然在 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
}

Answer 3

我不知道是否有办法用表格来做，但我一直在使用 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 文件中通过调用将 gaming 声明为全局变量这在构造函数之前

public gaming: any;

然后插入值

$scope.gaming=['nes'];

这应该可以正常工作。

ion-select 不显示 selected 选项与 FormBuilder (Ionic 3)

ion-select not showing selected option with FormBuilder (Ionic 3)

javascript

ionic2

ionic3

angular