Angular中带复选框的动态列表加载及关联div显示问题

嘿，我看你现在遇到的问题是动态生成的复选框没法分别控制对应的div显示对吧？这是因为你现在所有复选框都绑定了同一个subject1变量，不管点哪个都会触发同一个条件判断，而且所有复选框的name都是一样的，这在表单里也容易出问题。我来给你调整一下代码，搞定这个问题：

首先，咱们得让每个复选框的状态独立起来，不能都绑到同一个变量上。这里有两种常用的方式：

方式1：给每个列表项添加选中状态属性 #

先在组件里给你的items（注意你原来的代码里拼写成itmes了，建议修正）数组的每个对象加上isSelected属性，用来记录这个项的选中状态：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements OnInit {
  // 假设这是你原来的列表数据，修正拼写并补充唯一标识id
  items = [
    { id: 1, name: '数学' },
    { id: 2, name: '英语' },
    { id: 3, name: '物理' }
  ];

  ngOnInit(): void {
    // 初始化每个项的选中状态为未选中
    this.items.forEach(item => {
      item.isSelected = false;
    });
  }
}

然后修改模板，让每个复选框绑定到对应item的isSelected，同时生成唯一的name值：

<div class="col d-flex justify-content-start align-items-center" *ngFor="let item of items; let i = index">
  <input 
    [value]="item.id" 
    [(ngModel)]="item.isSelected" 
    [name]="'subject-' + item.id" <!-- 动态生成唯一name -->
    type="checkbox" 
  /> {{item.name}}
</div>

<!-- 循环渲染每个项对应的div，根据选中状态显示 -->
<div *ngFor="let item of items">
  <div *ngIf="item.isSelected" class="mt-2 p-2 bg-light">
    这是{{item.name}}对应的专属文本内容
  </div>
</div>

方式2：单独维护选中状态对象 #

如果不想修改原有的items数组结构，也可以单独用一个对象来记录每个项的选中状态，用项的唯一id作为键：

组件代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  items = [
    { id: 1, name: '数学' },
    { id: 2, name: '英语' },
    { id: 3, name: '物理' }
  ];

  // 用对象存储选中状态，初始为空
  selectedItems: { [key: number]: boolean } = {};
}

模板代码：

<div class="col d-flex justify-content-start align-items-center" *ngFor="let item of items; let i = index">
  <input 
    [value]="item.id" 
    [(ngModel)]="selectedItems[item.id]" 
    [name]="'subject-' + item.id"
    type="checkbox" 
  /> {{item.name}}
</div>

<div *ngFor="let item of items">
  <div *ngIf="selectedItems[item.id]" class="mt-2 p-2 bg-light">
    这是{{item.name}}对应的专属文本内容
  </div>
</div>

这样调整后，每个复选框的状态都是独立的，选中哪个就会显示对应的div啦。核心就是让每个复选框绑定到独立的状态变量，同时保证name属性唯一，避免表单冲突。

备注：内容来源于stack exchange，提问作者Srikanth Naidu