离子：带标题和详细文字的项目

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

您可以使用Thumbnail List项（ 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>