如何限制用户从 Ionic 的项目列表中仅选择一项

Question

我在 Ionic App 中工作，我已经显示了项目列表，其中我有项目选择的复选框。用户只能选择一项，但问题是，在我的项目列表中，用户可以选择所有项目。

这是我的shopping.html：

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

在此，我将显示带有项目的复选框，用户可以在其中选择项目。

这是我的 shopping.ts：

isCheckboxDisabled:boolean=false;
selectCP(itm){

}

我无法为此制定逻辑。在我的 html 中，用户可以选择所有项目。非常感谢任何帮助。

Answer 1

您可以改用ion-radio。

<ion-list>
  <ion-radio-group>
    <ion-item *ngFor="let itm of shippingdetails">
      <ion-label>{{itm.name}}</ion-label>
      <ion-radio value="{{itm.id}}"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>