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>

在上面的代码中，用户可以选择多个复选框。但是我想让用户只选择一个复选框。我怎样才能实现这一点。

请帮帮我。谢谢！

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没有更新请查看这个解决方法来解决它这是你的类似问题 ngFor not updating when item removed

以下是您需要的工作演示 Stackblitz demo

禁用复选框中的多个选择

1 个答案: