如何在Ionic中选择离子项目

Question

我正在使用Ionic应用程序，并且已经在我的应用程序中使用了离子项目，因此我想在移至下一页之前选择一个项目，但是我无法选择该项目。

这是我的 shipping.html ：

<ion-list *ngFor="let itm of shippingdetails">
    <ion-item-divider>
    <ion-checkbox slot="end"></ion-checkbox>
    <h2>{{itm.name}}</h2>
    <p>{{itm.mobile}}</p>
    <button ion-button outline item-end>
      <ion-icon name="create"></ion-icon>
    </button>
    <button ion-button outline item-end>
      <ion-icon name="trash"></ion-icon>
    </button>
    </ion-item-divider>
</ion-list>

在此，我正在循环中显示项目。它正在显示数据，但问题是我无法选择该项目。我还使用了该复选框，但是使用该复选框时，它并未在视图中显示p和h2标签。

这是html中的结果，使用复选框时未显示p和h2标签。当我不使用该复选框时，它将显示p和h2标签。

非常感谢您的帮助。

Answer 1

只需尝试一下即可：

<ion-list *ngFor="let itm of shippingdetails">
          <ion-item-divider>
            <ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
            <!-- <ion-radio slot="start"></ion-radio> -->
            <!-- <ion-toggle slot="start"></ion-toggle> -->
            <ion-label>
            <h2>{{itm.name}}</h2>
            <p>{{itm.mobile}}</p>
            <p>{{itm.state}}, {{itm.city}}</p>
            <p>{{itm.address}}</p>
            <p>Pincode: {{itm.pincode}}</p>
            </ion-label>
            <button ion-button outline item-end>
              <ion-icon name="create"></ion-icon>
            </button>
            <button ion-button outline item-end>
              <ion-icon name="trash"></ion-icon>
            </button>
          </ion-item-divider>
</ion-list>

在此，它将显示所有项目的复选框以及文本。