在 IONIC4 中未捕获 SELECT 的值

Question

选择值后，该值始终显示为空。以前版本的工作代码如下。并且下面还添加了最新版本。

我是不是哪里做错了？

IONIC 上一版本

 <div>
    <ion-select>
      <ion-option *ngFor="let city of citys.options" [value]="city"> {{city}}
      </ion-option>
    </ion-select>
  </div>

离子 4

 <div>
    <ion-select ngDefaultControl>
      <ion-select-option *ngFor="let city of citys.options" [value]="city"> {{city}}
      </ion-select-option>
    </ion-select>
  </div>

使用纯 html 控件时的工作代码

 <div>
    <select ngDefaultControl>
      <option *ngFor="let city of citys.options" [value]="city"> {{city}}
      </option>
    </select>
  </div>

Answer 1

您的代码在我测试时运行良好 - 以下是对我有用的代码：

<ion-item>
  <ion-label>Cities</ion-label>
  <ion-select placeholder="Select One" [(ngModel)]="selectedCity">
    <ion-select-option *ngFor="let city of citys.options">{{city}}</ion-select-option>
  </ion-select>
</ion-item>

<ion-item>
  You selected: {{selectedCity}}
</ion-item>

在ts文件中：

citys = {
    options: ["red", "blue", "yellow"]
  }

我怀疑其他地方有什么东西导致组件损坏。也许您的 citys 对象不包含您期望的数据。

Answer 2

在我的 components.module.ts 中导入 IonicModule 使其工作

 import { IonicModule } from '@ionic/angular';

在 IONIC4 中未捕获 SELECT 的值

Value not captured for SELECT in IONIC4

ionic-framework

ionic4