Angular中能否自动为*ngFor内元素分配模板引用变量(#)？

首先明确：Angular不支持直接在模板里用表达式动态生成#开头的模板引用变量名（比如你写的#[note][i]这种写法是无效的），但有两种实用方案能满足你的需求：

方案1：统一模板变量 + @ViewChildren（推荐） #

不用纠结每个元素的引用名是否唯一，给循环内的元素加一个统一的模板变量，再通过组件里的@ViewChildren批量获取所有实例，操作起来更灵活。

模板代码：

<div *ngFor="let note of notes; index as i">
  <h3 #noteItem>
    {{ note }}
  </h3>
</div>

组件代码：

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  notes = ['note1', 'note12', 'note15'];

  // 获取所有带#noteItem的元素
  @ViewChildren('noteItem') noteItems!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    // 遍历所有元素，按需操作
    this.noteItems.forEach((item, index) => {
      console.log(`第${index+1}个元素:`, item.nativeElement);
      // 要是需要给元素加唯一ID，也可以在这里设置
      item.nativeElement.id = `note${this.notes[index]}${index}`;
    });
  }
}

方案2：用唯一ID替代模板引用变量 #

如果只是需要通过标识定位元素，给每个元素设置唯一的id属性也能达到目的，之后可以通过ID直接获取元素。

模板代码：

<div *ngFor="let note of notes; index as i">
  <h3 [attr.id]="'note' + note + i">
    {{ note }}
  </h3>
</div>

组件里获取元素的示例：

ngAfterViewInit(): void {
  const targetElement = document.getElementById('note11');
  if (targetElement) {
    // 对元素进行操作
  }
}

内容的提问来源于stack exchange，提问作者CESAR ANDRES BAUTISTA MORA