如何在不使用Js id选择器的情况下动态获取Angular中*ngFor中的元素

我有一个具有引导下拉列表的组件，我想关注下拉范围内设置的当前周

我可以通过设置 ids 使用纯 javascript 来完成此操作，然后使用 Jquery .focus() 方法来关注它，但想知道是否有任何 Angular 7/ 7+ 方法可以使用 ViewChildren 等来完成此操作。

<button class="btn dropdown-toggle"
        (click)="focusOnWeek(currentWeek)"
        type="button" data-toggle="dropdown">
  <span>Week {{currentWeek}}</span> // currentWeek = 5 need to focus on week 5 <a> tag on click of this span
</button>
<ul class="dropdown-menu">
  <li *ngFor="let week of weekList">//weekList = [1,2,3,4,5,6,7,8,9,10]>
    <a class="dropdown-item"
      Week {{week}} 
    </a>

  </li>
</ul>

单击按钮后，当前周将成为焦点。

您可以使用ViewChildren找到您想要关注的锚元素。首先，设置一个模板引用变量（例如#anchor）在锚元素上：

<ul class="dropdown-menu">
  <li *ngFor="let week of weekList">
    <a #anchor class="dropdown-item">Week {{week}}</a>
  </li>
</ul>

在代码中，您可以使用以下命令获取对锚元素的引用ViewChildren:

@ViewChildren("anchor") anchorList: QueryList<ElementRef>;

然后将焦点设置在与指定周相对应的锚点上：

focusOnWeek(week) {
  const weekIndex = this.weekList.indexOf(week);
  const elementRef = this.anchorList.find((item, index) => index === weekIndex);
  elementRef.nativeElement.focus();
}

See 这次堆栈闪电战 https://stackblitz.com/edit/angular-e63zih?file=src%2Fapp%2Fapp.component.ts进行演示。

如果单击时菜单没有立即可见，您可以使用以下命令监视菜单项的创建：QueryList.changes事件。当您检测到项目可见时，您可以使用以下命令设置焦点currentWeek.

ngAfterViewInit() {
  this.anchorList.changes.subscribe(() => {
    if (this.anchorList.length > 0) {
      const weekIndex = this.weekList.indexOf(this.currentWeek);
      const elementRef = this.anchorList.find((item, index) => index === weekIndex);
      elementRef.nativeElement.focus();
    }
  });
}

See 这次堆栈闪电战 https://stackblitz.com/edit/angular-nx5dh2?file=src%2Fapp%2Fapp.component.ts进行演示。