Question

我想显示带有ion-list和ion-item的产品列表。

对于每种产品，第一行显示产品名称，第二行应以小字体显示产品详细信息。

右侧的图标，用于打开产品详细信息页面。

以下是代码段：

 <ion-list>
    <ion-item *ngFor="let product of productArray">
         <ion-label>{{product.name}}</ion-label>
          <div item-content>
               Rate: {{product.rate}} Tax : {{product.tax}}
          </div>
         <button ion-button icon-only item-right (click)='editProduct(product)'>
            <ion-icon name="arrow-dropright"></ion-icon>
          </button>           
    </ion-item>
 </ion-list>

产品详细信息未显示在第二行。它在第一行显示了与右侧对齐的细节。

Answer 1

请试试这个：

<ion-list>
    <ion-item *ngFor="let product of productArray">
        <p>{{product.name}}</p>
        <p>
            Rate: {{product.rate}} Tax : {{product.tax}}
        </p>
        <button ion-button icon-only item-right (click)='editProduct(product)'>
            <ion-icon name="arrow-dropright"></ion-icon>
        </button>           
     </ion-item>
 </ion-list>

ionic2：需要帮助显示带有离子项的产品列表

1 个答案: