angular - 访问 ngFor 指令中的特定 ElementRef

Question

当我在 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 项目，因此这就是问题开始的地方。我搜索过这个，有一个在 Controller 文件中使用 QueryList 的解决方案，但我认为这对于处理简单的点击事件、查询所有列表并一遍又一遍地迭代来说成本太高!

如果能够为 ngFor 的元素提供唯一的 elementref 那就太好了。有办法制作吗？或者还有其他解决办法吗？我在下面附上 StackBlitz 代码:

StackBlitz

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

我觉得这个例子很容易理解。我想更改特定单击列表项的颜色，但它只更改第一个。当我单击第二条或第三条时，我想更改第二条或第三条的线条颜色，但它们都会更改第一条线条的颜色。同样，有一个使用 QueryList 的解决方案，但我不想查询所有列表元素并将索引传递给 Controller ​​，然后迭代查询元素!

任何帮助都会很棒。

Answer 1

在这种情况下您可以使用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演示网址。