在 ngFor 指令中访问特定的 ElementRef答案

【问题标题】：Accessing Specific ElementRef in ngFor Directive在 ngFor 指令中访问特定的 ElementRef
【发布时间】：2021-07-22 12:16:09
【问题描述】：

虽然我在 ngFor 指令中，但如何通过 ElementRef 访问特定的 ngFor 项？说清楚：

<div>
  <div class="color"></div>
  <ul>
    <li *ngFor="let item of numberList">
      <div class="innercolor" #innercolor></div>
      <p (click) = "onItemClick()" >{{item}}</p>
    </li>
  </ul>
</div>

在此代码中，#innercolor 引用并不特定于任何 ngFor 项目，因此这就是问题开始的地方。我已经搜索过了，有一个在控制器文件中使用 QueryList 的解决方案，但我认为这对于处理简单的点击事件、查询所有列表并一遍又一遍地迭代来说太昂贵了！

给 ngFor 的元素提供唯一的 elementref 会很棒。有没有办法做到？或者有没有其他解决方案？我在下面附上 StackBlitz 代码：

堆栈闪电战

https://stackblitz.com/edit/elementref-problem-in-ngfor?file=src%2Fapp%2Fapp.component.html

我认为这个例子很容易理解。我想更改特定单击列表项的颜色，但它只更改第一个。当我单击第二或第三时，我想更改第二或第三行的颜色，但它们都更改了第一行的颜色。同样，QueryList 有一个解决方案，但我不想查询所有列表元素并将索引传递给控制器，然后遍历查询元素！

任何帮助都会很棒。

【问题讨论】：

标签： angular

【解决方案1】：

我会简单地使用索引并在点击时保存选定的索引。然后用 ngClass 给选中的元素添加一个类

<div>
    <div class="color"></div>
    <ul>
        <li *ngFor="let item of items; let i=index">
            <div [ngClass]="{'selected': i === selectedIndex}" ></div>
            <p (click)="onItemClick(i)">{{item}}</p>
        </li>   
    </ul>
</div>

【讨论】：

【解决方案2】：

您可以在这种情况下使用ViewChildren

如果你使用*ngFor，那么它将创建多个具有相同模板变量#innercolor 的模板。所以如果我们使用ViewChild，我们只会得到它的第一次出现。如果您使用ViewChildren，我们可以获得所有出现的#innercolor。

app.component.html

<div>
  <div class="color"></div>
  <ul>
    <li *ngFor="let item of numberList; let index = index;" >
      <div class="innercolor" #innercolor></div>
      <p (click) = "onItemClick(index)" >{{item}}</p>
    </li>
  </ul>
</div>

app.component.ts

@ViewChildren("innercolor") innercolor: QueryList<ElementRef>;

  onItemClick(elementIndex: number) {
    const element = this.innercolor.find(
      (element, index) => index === elementIndex
    );
    element.nativeElement.style.backgroundColor = "yellow";
  }

这是Stackblitz 演示网址。

【讨论】：