是否可以在 angular 中自动分配哈希（#）？

Question

有什么方法可以自动将散列（#）分配给 ngfor 中的元素？

<div *ngFor="let note of notes; index as i">
      <h3 #[note][i]>
        {{ note }}
      </h3>
</div>

我期望的结果是这样的：

<div>
      <h3 #note11>
        note1
      </h3>
</div>
<div>
      <h3 #note122>
        note12
      </h3>
</div>
<div>
      <h3 #note153>
        note15
      </h3>
</div>

Answer 1

您可以使用 index 变量自动为 ngFor 循环中的每个元素分配一个唯一的 id。 这是一个例子：

  <div *ngFor="let note of notes; index as i">
      <h3 id="note{{i}}">
        {{ note }}
      </h3>
</div>

这将为每个元素赋予“note0”、“note1”、“note2”等 id。

关于使用#，不能这样使用。 # 符号用于创建模板引用变量，您可以像 <h3 #myNote>{{ note }} 一样使用它，您可以在组件中使用 myNote 访问该元素。

Answer 2

try this;
<div *ngFor="let note of notes; index as i">
  <h3 #{{note}}{{i}}>
    {{ note }}
  </h3>
</div>

Note: 
   This would do your work but # is used to create template reference.