Angular点击p元素时在对应div内添加专属技术列表问题求助

你判断的没错，核心问题就是当前的listadoTec是全局变量，没有和每个div绑定，导致所有操作都指向同一个容器。下面给你几种落地的解决思路：

方案一：用Angular数据绑定实现（推荐，符合框架设计思想） #

这种方式完全不用手动操作DOM，靠框架的双向绑定和结构指令就能实现需求：

1. 定义组件数据结构
   在组件类里维护一个数组，每个元素对应一个分组的状态和技术列表：

// component.ts
techGroups = [
  { title: '前端技术', isVisible: false, techs: ['HTML', 'CSS', 'JavaScript'] },
  { title: '后端技术', isVisible: false, techs: ['Node.js', 'Java', 'Python'] },
  // 可按需添加更多分组
];

2. 修改HTML模板
   用*ngFor循环渲染所有div，点击p标签时切换对应分组的显示状态，根据状态渲染列表：

<!-- component.html -->
<div *ngFor="let group of techGroups" class="tech-group">
  <p (click)="group.isVisible = !group.isVisible">{{ group.title }}</p>
  <ul *ngIf="group.isVisible">
    <li *ngFor="let tech of group.techs">{{ tech }}</li>
  </ul>
</div>

方案二：手动操作DOM（适合必须直接操作元素的场景） #

如果一定要通过创建DOM元素的方式实现，可以在点击时把当前p元素的父div作为参数传入函数：

1. 修改HTML模板

<!-- component.html -->
<div class="tech-group">
  <p (click)="desplegar($event.target.parentElement)">前端技术</p>
</div>
<div class="tech-group">
  <p (click)="desplegar($event.target.parentElement)">后端技术</p>
</div>

2. 调整desplegar函数逻辑

// component.ts
desplegar(container: HTMLElement) {
  // 先检查容器内是否已有列表，避免重复创建
  if (container.querySelector('.tech-list')) return;

  const ul = document.createElement('ul');
  ul.className = 'tech-list';
  // 根据容器内容区分要插入的技术列表
  const targetTechs = container.textContent?.includes('前端') 
    ? ['HTML', 'CSS', 'JavaScript'] 
    : ['Node.js', 'Java', 'Python'];

  targetTechs.forEach(tech => {
    const li = document.createElement('li');
    li.textContent = tech;
    ul.appendChild(li);
  });

  container.appendChild(ul);
}

方案三：用ViewChildren批量获取容器 #

如果之前用了ViewChild，可以改成ViewChildren获取所有容器，通过索引定位目标：

1. 组件类中定义ViewChildren

// component.ts
import { ViewChildren, QueryList, ElementRef } from '@angular/core';

@ViewChildren('techContainer') techContainers!: QueryList<ElementRef>;

desplegar(index: number) {
  const container = this.techContainers.toArray()[index].nativeElement;
  // 后续创建列表的逻辑同方案二，注意避免重复插入
}

2. 修改HTML模板

<!-- component.html -->
<div #techContainer class="tech-group">
  <p (click)="desplegar(0)">前端技术</p>
</div>
<div #techContainer class="tech-group">
  <p (click)="desplegar(1)">后端技术</p>
</div>

内容的提问来源于stack exchange，提问作者Eberot