Question

我有一种方法可以将模板驱动形式的“ 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”是动态名称。

Answer 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

Angular 7-将＃parameter =“ ngModel”输入作为动态名称

1 个答案:

component.ts

.html