Angular 2：默认选中 ngFor 中的复选框

typescript

Angular 2：默认选中 ngFor 中的复选框

在Angular 2中，ngFor指令是一个非常实用的指令，用于在模板中循环渲染多个元素。当我们在循环中使用复选框时，可能会遇到一种需求：默认选中某些复选框。本文将介绍如何实现在ngFor循环中默认选中复选框的方法，并提供一个案例代码示例。

实现方法

要实现在ngFor循环中默认选中复选框的功能，我们可以使用一个布尔类型的变量来控制复选框的选中状态。首先，我们需要在组件中定义一个数组，用于保存复选框的选中状态。例如，我们定义一个名为selectedItems的数组，其中的元素代表每个复选框的选中状态。然后，在ngFor循环中，我们可以使用ngModel指令将每个复选框和对应的选中状态进行绑定。

下面是一个简单的示例代码：

html
<div *ngFor="let item of items">
  <input type="checkbox" [(ngModel)]="selectedItems[item]">
  <label>{{item}}</label>
</div>

在上述代码中，我们使用ngFor指令循环渲染了一组复选框，每个复选框对应items数组中的一个元素。使用ngModel指令将复选框和selectedItems数组中对应的元素进行双向绑定，实现了复选框的选中状态与数组元素的关联。

接下来，我们只需在组件中初始化selectedItems数组，并将需要默认选中的复选框对应的元素设置为true即可。例如，我们希望默认选中第一个复选框，可以在组件的构造函数中添加以下代码：

typescript
constructor() {
  this.selectedItems = [true, false, false];
}

在上述代码中，我们将selectedItems数组的第一个元素设置为true，其余元素为false，从而实现了默认选中第一个复选框的效果。

案例代码

下面是一个完整的案例代码，演示了如何在ngFor循环中默认选中复选框：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-checkbox-list',
  template: <code>
    <div *ngFor="let item of items">
      <input type="checkbox" [(ngModel)]="selectedItems[item]">
      <label>{{item}}</label>
    </div>
  </code>
})
export class CheckboxListComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];
  selectedItems: boolean[];
  constructor() {
    this.selectedItems = [true, false, false];
  }
}

在上述代码中，CheckboxListComponent组件定义了一个items数组，其中包含了三个元素。selectedItems数组用于保存复选框的选中状态，默认选中第一个复选框。模板中使用ngFor循环渲染了一组复选框，并使用ngModel指令将复选框和selectedItems数组中对应的元素进行绑定。

以上就是在Angular 2中实现在ngFor循环中默认选中复选框的方法，并提供了一个案例代码示例。希望本文对你有所帮助！