如何在Angular 2+的属性/属性绑定中放置一个变量？答案

【问题标题】：How to put a variable in attribute/property binding in Angular 2+?如何在Angular 2+的属性/属性绑定中放置一个变量？
【发布时间】：2020-05-13 05:35:47
【问题描述】：

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

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

<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}}"，但报错：

模板解析错误：Parser Error: Got interpolation({{}}) where 表达式是预期的。

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

【问题讨论】：

我认为您缺少 + 在两者之间登录。 ` [for] = "myDatepicker + i"`
或尝试`[for] = "'myDatepicker' + i"`

标签： angular angular-material

【解决方案1】：

目前，对此没有直接支持，只有一些解决方法。社区已请求此功能 - https://github.com/angular/angular/issues/33233，您可以在 Stack Overflow 上其他成员的问题中找到一些解决方案 - Dynamic template reference variable inside ngFor (Angular 2)

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

【讨论】：

【解决方案2】：

您无需担心这一点，拾取器可以正常工作。 Angular 会根据 DOM 范围自动找出哪个选择器。因此，以下内容可以正常工作：

<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>

【讨论】：

其实我问这个问题是因为当我选择一个日期时，它会改变下一个日期选择器的值而不是这个。我通过将输入设置为具有数组的 [(ngModel)] 并将下一个值设置为 null 发现了一个技巧。
发布所有你的代码——不仅仅是sn-p。正如我所说，这个例子工作得很好。也许你的代码有错误。