angular ngFor 中动态元素的 viewChild

Question

我的模板是这样的：

<div *ngFor="let data of array">
    <div #div></div>
</div>

有没有办法让我使用# 为每个 div 命名？如果是这样，我以后如何在我的 TS 文件中访问它们？

顺便问一下，这些 # 叫什么？我无法搜索它们，因为我现在知道它们是什么（我只知道它们的用途）

Answer 1

TL;DR 使用 ViewChildren 而不是 ViewChild

正如@Commerical Suicide 提到的，您不能动态设置引用。

#div被称为template reference variable。

您可以通过 *.ts 文件中的 ViewChildren 访问您的 divs。

样本：@ViewChildren('div') divs: QueryList<ElementRef>

然后您可以在新 QueryList 上调用多个方法，例如 forEach 或 find。

Answer 2

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

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

查看示例 stackblitz

Answer 3

您可以创建一个具有其逻辑的子组件

例子：

菜单-horizontal.component.html

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

菜单-item.component.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>

在此示例中，切换操作针对菜单项的子项，否则它将选择找到的第一个子项

angular ngFor 中动态元素的 viewChild

angular viewChild for dynamic elements inside ngFor

typescript

ngfor

angular