Question

我正在尝试实现此功能，但出现错误

<div *ngFor="let item of items; index as i">
    <div #menu{{i}}>
        //Some code
    </div>
    <div (onClick)="Clicked($event,menu{{i}})">
        //Some other code
    </div>

Got插值（{{}}），其中期望在[Clicked（$ event，menu {{i}}）]中第19列的表达式

有人知道如何解决吗？

Answer 1

您可以使用ViewChildren装饰器，它返回一个QueryList：您不再需要使用索引，Angular会为您处理所有这些。

查看此stackblitz以查看其运行情况（在单击按钮之前打开控制台）

Answer 2

我只是遇到了同样的问题，并通过引用模板引用变量所在的同一元素的唯一ID来解决了这个问题，我相信您也可以这样做。

<div class="outer-element" #outerElement>
  <div *ngFor="let item of items; index as i">
    <div id="menu{{i}}">
        //Some code
    </div>
    <div (onClick)="Clicked($event, outerElement.querySelector('#menu' + i)">
        //Some other code
    </div>
  </div>
</div>

Answer 3

动态模板参考在Angular中不可行。您可以尝试这两种解决方案。

解决方案1：

将'id'属性附加到div元素（即'menu1'），并将id传递给click方法上的组件，并使用document.querySelector（）访问DOM

解决方案2：

创建一个属性指令，您可以在其中传递ID作为@Input并在Constructor（）中访问elementRef。

如何使用angular 6在函数中传递动态模板参考变量

3 个答案: