Question

我正在使用离子2，当放入离子卡时，离子选择不会显示。请参阅下面的代码：

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

如果我移除离子卡，一切都按预期工作。这是离子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内。

Answer 2

尝试<ion-card-content></ion-card-content>

中的卡片内容

<ion-content>
      <ion-list>
        <ion-item>
            <ion-card>
              <ion-label>Quantity</ion-label>
               <ion-card-content>
                <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-content>
          </ion-card>
        </ion-item>
      </ion-list>
    </ion-content>

离子2离子选择不在离子卡中工作

2 个答案: