如何将变量放入 Angular 2+ 的属性/属性绑定中？

Question

我正在尝试从 Angular Material 动态构建一些日期选择器。

Angular材料中给出的示例代码是这样的：

<input [matDatepicker] = "myDatepicker">
<mat-datepicker-toggle [for] = "myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

现在我的问题是我想将整个代码块包装在*ngFor并让它重复多次。 因此，我将其命名为#myDatepicker{{i}}而不是#myDatepicker ，其中i是*ngFor循环的索引。 我现在的问题是如何将该索引i放入[for] = "myDatepicker"部分？

我试过[for] = "myDatepicker{{i}}"给出错误：

模板解析错误：解析器错误：得到插值（{{}}），其中表达式是预期的。

我也试过for = "myDatepicker{{i}}"但这似乎也不起作用，即使没有错误。

Answer 1

目前，对此没有直接支持，只有一些解决方法。 社区已请求此功能 - https://github.com/angular/angular/issues/33233您可以在其他成员关于 Stack Overflow 的问题中找到一些解决方案 - ngFor 中的动态模板引用变量（Angular 2）

这两个链接都提供了一些解决方案，但实际上我认为这是一个缺失的功能。

Answer 2

您无需担心这一点，以便拾取器正常工作。 Angular 将根据 DOM scope 自动确定哪个选择器是哪个。 因此，以下内容可以正常工作：

<div *ngFor="let i of [0,1,2]">
  <mat-form-field>
    <input [matDatepicker] = "myDatepicker">
    <mat-datepicker-toggle [for] = "myDatepicker"></mat-datepicker-toggle>
    <mat-datepicker #myDatepicker></mat-datepicker>
  </mat-form-field>
</div>