Question

我完全按照示例所示使用Ionic 2 Select组件（我实际上是复制/粘贴＆＃34;游戏＆＃34;选择），当弹出窗口显示选项时，选项文本总是失踪。它将显示每个项目的单选按钮，但只显示文本的空白区域。我已经检查了HTML，以确保它不被CSS隐藏，并且选项文本不在HTML中。

我已经在浏览器中尝试了这个并在实际的Android手机上运行并获得了相同的结果。我做错了什么？

这是我的HTML：

＆＃13;

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

＆＃13;

我根本没有任何自定义CSS样式。

Answer 1

尝试将select组件放在列表中

<ion-list>
    <ion-item>
      <ion-label>Toppings</ion-label>
      <ion-select [(ngModel)]="toppings" multiple="true">
        <ion-option>Bacon</ion-option>
        <ion-option>Black Olives</ion-option>
        <ion-option>Extra Cheese</ion-option>
        <ion-option>Mushrooms</ion-option>
        <ion-option>Pepperoni</ion-option>
        <ion-option>Sausage</ion-option>
      </ion-select>
    </ion-item>
</ion-list>

如果您尝试使用按钮并弹出选择，请使用此选项：

   presentChooseGame() {
      let alert = this.alertCtrl.create({
        title: 'Choose Game',
        inputs: [
          {
            name: 'gameboy',
            value: 'gameboy',
            type: 'radio',
            label: 'GameBoy'
          },
          {
            name: 'gameboy2',
            value: 'gameboy2',
            type: 'radio',
            label: 'GameBoy2'
          },
          {
            name: 'gameboy3',
            value: 'gameboy3',
            type: 'radio',
            label: 'GameBoy3'
          },
        ],
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
          },
          {
            text: 'Ok',
            handler: data => {
              console.log(data);
            }
          }
        ]
      });
      alert.present();
    }

希望这有帮助！：）

Answer 2

事实证明，问题在于实时重新加载。完成重建后，会出现选择值。

Ionic 2选择不显示选项文本

2 个答案: