如何动态设置Angular＃模板参考变量

Question

我有一个从数据库填充的组的列表，并使用ngFor在html中进行迭代。

<mat-card  *ngFor="let group of groups" >
  <mat-card-title #group > {{group}}  </mat-card-title>
</mat-card>

我希望 #group 是该组的值，而不是硬编码。这样，我可以拥有另一个组件来滚动到不同的模板变量。

我该怎么做？谢谢。

Answer 1

据我所知，模板引用变量的作用域仅限于定义它们的模板。结构指令会创建一个嵌套模板，因此在您的情况下，mat-card-title会引入一个单独的作用域。

因此，在您的情况下，基本上可以在<mat-card-title #group >内使用组模板引用变量，因为它本身具有唯一的作用域。

<mat-card  *ngFor="let group of groups" >
  <mat-card-title #group > {{group}}  </mat-card-title>
</mat-card>

  

有关更多详细信息，请参阅@yurzui here

的回答。