我希望用户只选择一个复选框而不是多个？我怎样才能以角度接近？

Question

我有多个复选框，但我希望用户选择一个复选框而不是多个复选框，如果他选中一个复选框并返回选中值，否则什么都不会显示。有人可以帮忙吗？

<div class="form-check" *ngFor="let product of DisplayProductList">
    <label class="form-check-label text-break">
        <input class="form-check-input" type="checkbox" [value]="true" [(ngModel)]="product.isChecked"
            (change)="changeSelection($event)" />
        {{ product.template_name }}
        <span class="form-check-sign">
            <span class="check"></span>
        </span>
    </label>
</div>

changeSelection(event: any) {
  this.checkedIDs = [];
  if (event.target.checked) {
    this.selectedItemsList = this.DisplayProductList.filter(
      (product, index) => {
        if (product.isChecked == true) {
          let splitstring = product.template_parameter;
          let sepratedArray = splitstring.split(',');
          this.variable1 = sepratedArray[0];
          this.variable2 = sepratedArray[1];
          this.checkedIDs.push(product.id);

          this.sendclusteridApi(this.productid);
          return product.isChecked;
        }
      }
    );
  }
}

Answer 1

正如 cmets 中提到的，这就是单选按钮的作用，但如果您需要使用复选框实现相同的功能，您可以通过以下方式实现：

• 定义一个selectedIndex 变量，并为其分配最后一个选中复选框的索引。
• 将复选框的ngModel 绑定到[ngModel]="selectedIndex === index"，其中index 是*ngFor 循环中复选框的索引。

<div class="form-check" *ngFor="let product of DisplayProductList; let index = index">
  <label class="form-check-label text-break">
    <input class="form-check-input" type="checkbox" [ngModel]="selectedIndex === index"
        (change)="changeSelection($event, index)" />
    {{ product.template_name }}
    <span class="form-check-sign">
        <span class="check"></span>
    </span>
</label>
</div>

selectedIndex: number;

changeSelection(event, index) {
  this.selectedIndex = event.target.checked ? index : undefined;

  // do your logic here...
}