如何通过动态ID在*ngFor中使用ViewChildren获取指定元素？

答案是可以实现，但ViewChildren本身不支持直接通过ID检索目标元素，需要借助一些额外处理。下面给你几种实用的实现方式：

方法1：利用QueryList的find方法筛选 #

直接在触发方法里，通过QueryList的find方法，根据元素的ID属性筛选目标元素：

getDivs() {
  const targetDiv = this.divs.find(div => div.nativeElement.id === 'div-2');
  if (targetDiv) {
    targetDiv.nativeElement.style.color = 'red';
  }
}

这种方法适合偶尔查询的场景，不需要额外维护数据结构，直接基于现有QueryList操作。

方法2：直接调用原生DOM API #

如果能确保目标元素已经完成渲染（比如按钮点击事件触发时，视图早已初始化），可以直接用document.getElementById获取元素：

getDivs() {
  const targetDiv = document.getElementById('div-2');
  if (targetDiv) {
    targetDiv.style.color = 'red';
  }
}

注意：Angular默认的ViewEncapsulation.Emulated模式不会影响元素ID的唯一性，所以这个方法依然有效；如果组件设置了ViewEncapsulation.None，要保证ID在全局范围内唯一，避免冲突。

方法3：预存ID到元素的映射（适合频繁访问） #

如果需要多次通过ID获取元素，建议在视图初始化后，把QueryList转换成以ID为键的映射结构（比如Map），后续直接通过键快速取值：

divMap = new Map<string, ElementRef>();

ngAfterViewInit() {
  this.updateDivMap();
  // 监听QueryList的变化，实时更新映射
  this.divs.changes.subscribe(() => this.updateDivMap());
}

updateDivMap() {
  this.divMap.clear();
  this.divs.forEach(div => {
    this.divMap.set(div.nativeElement.id, div);
  });
}

getDivs() {
  const targetDiv = this.divMap.get('div-2');
  if (targetDiv) {
    targetDiv.nativeElement.style.color = 'red';
  }
}

这种方法的优势是后续查询效率高，尤其适合*ngFor数据源动态变化的场景，能自动同步元素的新增/删除。

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