<ion-label> 和 <ion-datetime> 之间的离子 <ion-item> 未显示答案

【问题标题】：Ionic <ion-item> between <ion-label> and <ion-datetime> not showing up<ion-label> 和 <ion-datetime> 之间的离子 <ion-item> 未显示
【发布时间】：2018-12-25 04:41:08
【问题描述】：

我试图让内容出现在堆叠的 ion-label 和 ion-datetime 输入之间，但它只是没有出现。我究竟做错了什么？这是html代码：

<ion-item>
  <ion-label stacked >
    <p>Test label</p>
  </ion-label>
  <ion-item>
    <img src="https://www.shorturl.at/img/shorturl-square.png" />
    <p class="multiline-text"> Test text </p>
  </ion-item>
  <ion-datetime displayFormat="MMM D, YYYY" placeholder="MMM D, YYYY"></ion-datetime>
  <button large class="transparent-button" style="align-self: flex-start; margin-top:12px;" ion-button item-right (click)="toggleHelp(input)">
    <ion-icon style="font-size: 1.7em; align-self: flex-start;" name="ios-help-circle-outline"></ion-icon>
  </button>
</ion-item>

【问题讨论】：

<ion-item> 就是那些烦人的标签！不要尝试像<div> 那样使用它，否则你会得到很多意想不到的东西！另外，不要将它与另一个相同的标签嵌套使用，因为你不会得到你想要的结果。
你想做什么？您的预期输出是什么？
imans77 - 不幸的是，使用 div 代替 ion-item 并没有帮助。
神秘 - 我希望图像和段落元素会出现

标签： html angular ionic-framework ionic2 ionic3

【解决方案1】：

我在我的一个项目中复制并测试了您的代码并显示了内容。

我注意到的第一件事是你有一个 ion-item 嵌套在另一个 ion-item 中。在继续下一个离子项之前，您应该关闭一个离子项。我建议使用自定义 css 来构建您想要实现的目标，而不是以非真正意图的方式使用离子 UI 组件。

【讨论】：

很奇怪，即使使用 div 标签也不显示给我...stackblitz.com/edit/ionic-txb3di?file=pages/home/home.html

【解决方案2】：

所以经过一段时间的谷歌搜索后，我发现 item-content 属性必须添加到 ion-item 中。此代码有效：

<ion-item>
  <ion-label stacked >
    <p>Test label</p>
  </ion-label>
  <ion-item item-content>
    <img src="https://www.shorturl.at/img/shorturl-square.png" />
    <p class="multiline-text"> Test text </p>
  </ion-item>
  <ion-datetime displayFormat="MMM D, YYYY" placeholder="MMM D, YYYY"></ion-datetime>
  <button large class="transparent-button" style="align-self: flex-start; margin-top:12px;" ion-button item-right (click)="toggleHelp(input)">
    <ion-icon style="font-size: 1.7em; align-self: flex-start;" name="ios-help-circle-outline"></ion-icon>
  </button>
</ion-item>

https://stackblitz.com/edit/ionic-cmkons?file=pages/home/home.html

【讨论】：