Question

我正在尝试从Angular Material动态地构建许多日期选择器。

Angular Material中提供的示例代码如下：

def Tk1():
    x = 1

def Tk2():
    x = 2

现在，我的问题是，我想将整个代码块包装在<input [matDatepicker] = "myDatepicker"> <mat-datepicker-toggle [for] = "myDatepicker"></mat-datepicker-toggle> <mat-datepicker #myDatepicker></mat-datepicker>中，并使其重复多次。因此，我将其命名为*ngFor而不是#myDatepicker，其中#myDatepicker{{i}}是i循环的索引。现在我的问题是如何将索引*ngFor放在i部分？

我尝试了[for] = "myDatepicker"并给出了错误：

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

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

Answer 1

当前，对此没有直接支持，只有一些解决方法。社区-https://github.com/angular/angular/issues/33233已请求此功能，您可以在堆栈溢出-Dynamic template reference variable inside ngFor (Angular 2)

的其他成员的问题上找到一些解决方案

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

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

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

2 个答案: