Question

我正在尝试使内容出现在堆叠的离子标签和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>

Answer 1

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

我注意到的第一件事是您在另一个离子项目中嵌套了一个离子项目。您应该先关闭一个离子项目，然后再进行下一个离子项目。我建议您使用自定义css来构建您要实现的目标，而不要使用并非真正意图的方式使用离子UI组件。

Answer 2

因此，在浏览Google搜索一段时间后，我发现必须将 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

没有显示<ion-label>和<ion-datetime>之间的离子<ion-item>

2 个答案: