Отключить множественный выбор в флажке

Question

Это мой код:

<ion-list class="ion-list">
            <ion-item *ngFor="let item of ProductType; let i= index" class="item-checkbox ion-list-item">
                <ion-label class="checkbox">{{item.name}}</ion-label>
                <ion-checkbox [(ngModel)]="item.isChecked" multiple="false"></ion-checkbox>
            </ion-item>
        </ion-list>

В приведенном выше коде пользователь может установить более 1 флажка. Но я хочу разрешить пользователю устанавливать только один флажок. Как я могу этого добиться.

Пожалуйста, помогите мне. Спасибо заранее !!

Uodated:

this.ProductType = [{ name: "sec", isChecked: false },
    { name: "min", isChecked: false }
    ];

Answer 1

Я создал одну функцию для вас, надеюсь, она поможет:

   <ion-list class="ion-list">
            <ion-item *ngFor="let item of ProductType; let i= index" class="item-checkbox ion-list-item">
                <ion-label class="checkbox">{{item.name}}</ion-label>
                <ion-checkbox [(ngModel)]="item.isChecked" multiple="false" (change)="checkboxToRadio(i)"></ion-checkbox>
            </ion-item>
        </ion-list>



 checkboxToRadio(index) {
    let tempArr = [];
    this.ProductType.map((item, i) => {
      console.log(this.ProductType[i])
      tempArr[i] = item;
      console.log(i +"fdsa"+index);
      if (i == index) {
        // tempArr[i].isChecked = !item.isChecked; 
      } else {
        tempArr[i].isChecked = false;
      }
    });
    this.ref.detectChanges();
    this.ref.markForCheck();
    this.ProductType = tempArr;
  }

Я думаю, что ваш ngFor не обновляется, пожалуйста, проверьте ответ или посмотрите, как это исправить Вот проблема, похожая на вашу ngНе обновляется при удалении элемента

Вот рабочая демонстрация того, что вам нужно Stackblitz demo