Angular复选框显示来自其他记录的检查

Angular 复选框显示来自其他记录的检查通常涉及到数据绑定和组件间的通信。在 Angular 中，复选框的状态可以通过双向数据绑定来控制，这意味着复选框的值会自动同步到绑定的数据模型中。

基础概念

双向数据绑定：Angular 提供了 [(ngModel)] 指令来实现双向数据绑定，这样可以在视图和模型之间同步数据。
组件通信：组件间可以通过输入（@Input）和输出（@Output）属性进行通信，或者使用服务来共享状态。

类型

单个复选框：绑定到一个布尔值。
复选框列表：绑定到一个数组，数组中的每个元素代表一个选中的选项。

应用场景

表单处理：在表单中使用复选框来收集用户的选择。
权限管理：显示用户拥有的权限列表。
数据筛选：允许用户通过勾选复选框来筛选显示的数据。

示例代码

假设我们有一个列表，每个项目都有一个复选框，我们需要显示哪些项目已经被之前的操作选中。

组件模板 (component.html):

<div *ngFor="let item of items">
  <input type="checkbox" [checked]="isSelected(item)" (change)="toggleSelection(item)">
  {{ item.name }}
</div>

组件类 (component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    // ...其他项目
  ];
  selectedItems = [1]; // 假设ID为1的项目已经被选中

  isSelected(item) {
    return this.selectedItems.includes(item.id);
  }

  toggleSelection(item) {
    const index = this.selectedItems.indexOf(item.id);
    if (index > -1) {
      this.selectedItems.splice(index, 1);
    } else {
      this.selectedItems.push(item.id);
    }
  }
}