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）]，它将起作用。

我做错了什么，或者最新的离子更新导致了这个问题？

任何帮助都会很棒。

Answer 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
}

Answer 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文件中通过调用将游戏声明为全局变量这在构造函数之前

public gaming: any;

然后插入值

$scope.gaming=['nes'];

这应该可以正常工作。

Answer 3

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

ion-select未显示FormBuilder的选定选项（Ionic 3）

3 个答案: