如何动态设置 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 的回答在这里