Angular 7 - 将 #parameter="ngModel" 输入作为动态名称

【问题标题】：Angular 7 - make #parameter="ngModel" input as a dynamic nameAngular 7 - 将 #parameter="ngModel" 输入作为动态名称
【发布时间】：2019-03-13 16:46:11
【问题描述】：

我有办法在模板驱动的表单中创建“ngModel”参数作为动态名称（例如通过循环）？

我希望得到类似的东西：

<div *ngFor='let d of items; let i = index;'>
    <input type="text" name="street" 
    [(ngModel)]="d.surname" #surname{{d.myindex}}="ngModel">
</div>

其中“d.myindex”是动态名称。

【问题讨论】：

您不需要这样做。你应该使用#surname="ngModel"。
但我正在按数组长度创建几个输入字段。我不能用同一个名字来称呼他们。
请告诉我们您想如何使用#surname 模板引用变量。
这就是我写的例子。我有 items 数组，我希望基于这个数组创建输入字段。
该示例显示您想定义#surname 变量，但不是您想用它做什么。你需要吗？

标签： angular angular2-ngmodel

【解决方案1】：

我不知道你有什么要求让它变得动态，但是...... TemplateRef 不是为了那个。

TemplateRef => 它是块范围的，尽管它在循环时具有相同的名称。您可以使用 ViewChildren 装饰器，它返回 ItemType 的所有项目，剩下的魔法 Angular 会为您完成。

component.ts

<div *ngFor="let i of [0, 1, 2, 3]" #items>
     <button (click)="onClick(items, i)">Click on item {{ i }}</button>
</div>

.html

@ViewChildren('items') items: ItemType<ElementRef>;

 onClick(item, i) {
    console.log('item clicked : ', item);
    console.log('index of item : ', i);
    console.log('all items : ', this.items)
 }

我不清楚，你想要什么，但我只是用click 事件展示了一个方法，请将它应用到你的input

更多详情请查看：https://stackoverflow.com/a/44441164/5835354

【讨论】：