离子性 <ion-item> 之间 <ion-label> 和 <ion-datetime> 没有出现

Question

I am trying to make content appear between a stacked ion-label and ion-datetime input, but it just doesn't show up. What am I doing wrong? This is the html code:

<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

I copied and tested your code in one of my projects and the content appears.

The first thing I noticed is you have an ion-item nested inside another ion-item. You should close an ion-item before proceeding to next ion-item. I would suggest using custom css to build what you are trying to achieve, instead of using ionic UI Components in ways not really intended.

Answer 2

So after a while of digging through Google searches I found that item-content attribute has to be added to the ion-item. This code works:

<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