如何访问由*ngFor loop - Angular索引的复选框的checked属性

在Angular中，ngFor指令用于循环渲染模板中的元素。如果要访问由ngFor循环生成的复选框的checked属性，可以通过以下步骤实现：

1. 在组件的模板文件中，使用*ngFor指令循环生成复选框，并绑定一个布尔类型的属性到每个复选框的checked属性上。例如：

<div *ngFor="let item of items; let i = index">
  <input type="checkbox" [checked]="isChecked[i]" (change)="toggleCheckbox(i)">
  {{ item }}
</div>

1. 在组件的类文件中，定义一个布尔类型的数组isChecked，并初始化为与items数组长度相同的空数组。例如：

export class MyComponent {
  items: string[] = ['Item 1', 'Item 2', 'Item 3'];
  isChecked: boolean[] = [];

  constructor() {
    this.isChecked = new Array(this.items.length).fill(false);
  }

  toggleCheckbox(index: number) {
    this.isChecked[index] = !this.isChecked[index];
  }
}

1. 在组件的类文件中，定义一个toggleCheckbox方法，用于切换isChecked数组中对应索引位置的布尔值。

通过以上步骤，我们可以实现访问由*ngFor循环生成的复选框的checked属性，并通过isChecked数组来跟踪每个复选框的选中状态。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe