Как запретить пользователю выбирать только один элемент из списка элементов в 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

Вы можете сделать это, как показано ниже.

HTML

<ion-content padding>
<ion-list *ngFor="let itm of shippingdetails">
          <ion-item-divider>
            <ion-checkbox slot="end" checked="{{itm.isChecked}}" (ionChange)="selectCP($event, itm)"></ion-checkbox>
            <ion-label>
            <h2>{{itm.name}}</h2>
            <p>{{itm.mobile}}</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>
</ion-content>

TS

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  shippingdetails: any = [];

  constructor() {

    this.shippingdetails = [
      { name: 'Raghav', mobile: '0771111111', isChecked: false },
      { name: 'Rahul', mobile: '0772222222', isChecked: false },
      { name: 'Virat', mobile: '0773333333', isChecked: false },
      { name: 'Sanga', mobile: '0774444444', isChecked: false },
    ];

  }

  selectCP(event, item) {

    if (event.checked) {

      this.shippingdetails.forEach(shpItm => {

        if (shpItm.name === item.name) {
          shpItm.isChecked = true;
        } else {
          shpItm.isChecked = false;
        }
      });
    }
    if (!event.checked) {
        this.shippingdetails.forEach(shpItm => {

        if (shpItm.name === item.name) {
          shpItm.isChecked = false;
        }
      });
    }

  }

}

Я думаю, что это будет полезно.найти рабочую демо здесь

Answer 2

Вместо этого вы можете использовать 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>