angular - ionic 2 ionic 选择在 ionic 卡中不起作用

Question

我使用的是 ionic 2，其中 ion-select 放置在 ion-card 内时不会显示。请参阅下面我的代码:

  <ion-content>
  <ion-list>
    <ion-item>
        <ion-card>
          <ion-label>Quantity</ion-label>
          <ion-select>
            <ion-option value="nes">0</ion-option>
            <ion-option value="n64">1</ion-option>
            <ion-option value="ps">2</ion-option>
            <ion-option value="genesis">3</ion-option>
            <ion-option value="saturn">More</ion-option>
          </ion-select>
      </ion-card>
    </ion-item>
  </ion-list>
</ion-content>

如果我移除 ionic 卡，一切都会按预期进行。这是 ionic 2 中的错误还是我遗漏了什么？

Answer 1

您的代码存在的问题是 ion-card 组件不应进入 ion-item 内部。正如您在 this working plunker 中看到的那样，您可以像这样更改它以使其正常工作:

<ion-content>

  <ion-card>
    <ion-item>
      <ion-label>Quantity</ion-label>
      <ion-select>
        <ion-option value="nes">0</ion-option>
        <ion-option value="n64">1</ion-option>
        <ion-option value="ps">2</ion-option>
        <ion-option value="genesis">3</ion-option>
        <ion-option value="saturn">More</ion-option>
      </ion-select>
    </ion-item>
  </ion-card>

</ion-content>

另请注意，我已将标签和选择元素放置在 ion-item 内。