Angular 4：动态设置局部变量#答案

【问题标题】：Angular 4: setting the local variable # dynamicallyAngular 4：动态设置局部变量#
【发布时间】：2018-06-04 16:13:33
【问题描述】：

有没有办法动态设置#id，Angular 用来构造@ViewChild 元素引用的HTML 属性？

特定需求：我有以下模板，通过迭代 *ngFor 创建，我想在迭代中分配 Angular id。

<ul>
   <li *ngFor="let link of links">
  </li>
</ul>

在它被解释之后，最终会得到类似的结果：

<ul>
  <li #link1>
   </li>
  <li #link2>
   </li>
 </ul>

现在我知道了许多其他获取元素的方法，我可以将 # 分配给 ul 元素等，但想知道是否有办法在 ngFor 上做到这一点。

查看答案并尝试组合后进行编辑：

似乎没有办法将不同的局部变量标识符分配给 *ngFor 生成的单个元素。您可以像接受的答案所暗示的那样全部获取它们，或者只获取父元素，然后从那里找到自己的方式。

【问题讨论】：

标签： angular

【解决方案1】：

您可以使用索引。

 <ul>
<li *ngFor="let link of links; let i=index;">
{{link.title}}{{i}} 
</li>
</ul>

【讨论】：

【解决方案2】：

你可以像这样使用代码：

<ul>
    <li *ngFor="let item of items;let i = index;" #itemRef{{i}}>{{item.xyz}}</li>
</ul>

【讨论】：

【解决方案3】：

尽管常规变量和# 看起来很相似，但可以将多个元素分配给单个本地模板引用变量：

<ul>
   <li *ngFor="let link of links" #linkRef></li>
</ul>

可以通过以下方式获得：

@ViewChildren('linkRef') linkRefs;

【讨论】：

@amy8374 当然是doesn't。 ViewChild 引用单个元素。 ViewChildren 引用了多个。