angular - ionic : Item with title and detail text

Question

问题:看起来太简单了 - 如何获得带有标题文本和详细文本的项目？

示例:

注意:我已经尝试了两种可能的解决方案。两者都会导致没有内容的空白白色项目。

<ion-item-sliding>
      <ion-item>
        <ion-icon name="pin" item-start color="primary"></ion-icon>
        <ion-list>
          <ion-item>
            <ion-label>Title </ion-label>
          </ion-item>
          <ion-item>
            <ion-input disabled="true" [(ngModel)]="event.detail"></ion-input>
          </ion-item>
        </ion-list>
      </ion-item>
    </ion-item-sliding>

和

  <ion-item-sliding>
      <ion-item>
            <ion-icon name="pin" item-start color="primary"></ion-icon>
        <ion-grid>
         <ion-row>
          <ion-column>
            <ion-label>Title</ion-label>
          </ion-column>
          <ion-column>
            <ion-input disabled="true" [(ngModel)]="event.detail"></ion-input>
          </ion-column>
        </ion-row>
        </ion-grid>
      </ion-item>
    </ion-item-sliding>

Answer 1

您可以使用缩略图列表项( docs ):

  <ion-item>
    <ion-thumbnail item-start>
      <ion-icon name="pin" item-start color="primary"></ion-icon>
    </ion-thumbnail>
    <h2>Title</h2>
    <p text-wrap>{{ event.detail }}</p>
  </ion-item>