如何用ngFor在Angular 9中一次只选中一个复选框

在Angular 9中使用ngFor指令一次只选中一个复选框，可以通过绑定一个选中的值来实现。以下是一种实现方式：

1. 首先，在组件的类中定义一个变量来保存选中的复选框的值：

selectedCheckbox: any;

1. 在HTML模板中使用ngFor指令来生成复选框列表，并绑定每个复选框的值和选中状态：

<div *ngFor="let checkbox of checkboxes">
  <input type="checkbox" [(ngModel)]="checkbox.checked" (change)="selectCheckbox(checkbox)">
  {{ checkbox.value }}
</div>

上述代码中，checkboxes是一个数组，包含了复选框的值和选中状态。checkbox.checked绑定了复选框的选中状态。

1. 在组件类中定义一个方法，用于处理复选框的选中事件：

selectCheckbox(checkbox: any) {
  this.checkboxes.forEach((c: any) => {
    if (c !== checkbox) {
      c.checked = false; // 取消其他复选框的选中状态
    }
  });
  this.selectedCheckbox = checkbox; // 保存选中的复选框的值
}

上述代码中，遍历复选框数组，将除当前选中复选框外的其他复选框的选中状态设置为false。然后将当前选中复选框的值保存到selectedCheckbox变量中。

这样，每次选中一个复选框时，其他复选框的选中状态就会自动取消，只有一个复选框被选中。

请注意，这只是一种实现方式，具体的实现可以根据实际情况进行调整。

另外，推荐的腾讯云相关产品和产品介绍链接地址，可参考腾讯云的官方文档和产品页面：

• 腾讯云官方文档：https://cloud.tencent.com/document
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb-mysql
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云人工智能：https://cloud.tencent.com/product/ai
• 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动推送：https://cloud.tencent.com/product/mpns
• 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
• 腾讯云视频处理服务：https://cloud.tencent.com/product/vod
• 腾讯云音视频通信：https://cloud.tencent.com/product/trtc
• 腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
• 腾讯云云原生数据框架 TSE：https://cloud.tencent.com/product/tse
• 腾讯云云原生应用中心：https://cloud.tencent.com/product/tencentcloud-app-center