TL;DR使用ViewChildren代替ViewChild
正如@商业自杀所提到的，你不能动态地设置引用。
#div称为模板引用变量。
您可以通过*.ts文件中的ViewChildren访问您的 * div *。
样品：@ViewChildren('div') divs: QueryList<ElementRef>
然后可以在新的QueryList上调用多个方法，如forEach或find。

有一种替代方法可以通过事件捕获和处理循环中的动态元素。

<div *ngFor="let name of names">
  <input #boofoo type="text" (click)="onClick($event, name)" />
  <button (click)="boofoo.click()">Change text</button>
</div>

请参见示例stackblitz

您可以创建一个子组件，该子组件将具有其逻辑
示例：

菜单-水平.组件.html

<nav id='site-header__nav__desktop'>
    <template-menu-item *ngFor="let link of navLinks" [navItem]="link">
    </template-menu-item>
</nav>

菜单项.组件.html

<div>
    <a class="nav-link" #parent routerLink="/test" (click)="toggle()">
        {{ navItem.text }}
    </a>
    <ul #children class="children-menu" *ngIf="navItem.children">
        <li *ngFor="let child of navItem.children">
            <a [href]="child.link">
                {{child.text}}
            </a>
        </li>
    </ul>
</div>

在此示例中，toggle操作的目标是菜单项的子项，否则它将选择找到的第一个子项