ionic2:在使用ion-item显示产品列表时需要帮助

Question

我想显示一个包含离子列表和离子项的产品列表。

对于每个产品，第一行显示产品

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

右侧的图标，用于打开商品详情页面。

下面是代码片段：

 <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>