如何在ngModel中使用动态变量?
我正在尝试使用下面的代码,但会出现以下错误:
<div *ngFor="let num of ['1','2','3']; let i=index">
<input id="qtd{{num}}" [(ngModel)]="qtd{{num}}" type="text"/>
</div>
ERRO
Unhandled Promise rejection: Template parse errors:
Parser Error: Got interpolation ({{}})
答案 0 :(得分:23)
在组件中定义数组并继续推入。
export class AppComponent {
qtd:any[] = {};
}
然后,更新您的模板,如
<div *ngFor="let num of ['1','2','3']; let i=index">
<input id="qtd{{num}}" [(ngModel)]="qtd[num]" type="text"/>
</div>
{{ qtd | json}}
在此,所有动态模型都将在 qtd 数组
中<强> Plunker 强>
希望有所帮助!
答案 1 :(得分:12)
假设您有以下组件
export class AppComponent {
qtd1 = 'qtd1';
qtd2 = 'qtd2';
qtd3 = 'qtd3';
}
然后您的模板可能如下所示:
<div *ngFor="let num of ['1','2','3']; let i=index">
<input id="qtd{{num}}" [(ngModel)]="this['qtd' + num]" type="text"/>
</div>
<强> Plunker Example 强>
答案 2 :(得分:0)
在动态创建文本框的情况下,我们最需要动态ngModel。
在您的ts文件中
npm install
您的HTML文件(模板)
export class AppComponent {
public selectedBranch: any[] = [0];
public selectedShiftNameTime: any[] = [0];
public CustomDates: any[] = [0];
}
答案 3 :(得分:0)
在我的情况下,这种方法可以正常工作
export class AppComponent {
qtd:any[] = {};
}
在html中,我使用索引而不是值(数字):
<div *ngFor="let num of ['1','2','3']; let i=index">
<input id="qtd[i]" [(ngModel)]="qtd[i]" type="text"/>
</div>
答案 4 :(得分:0)
如果您想要一个与索引匹配的ID,也可以按照这种方式进行操作。
<div *ngFor="let num of ['1','2','3']; let i=index">
<input
[attr.id]="'qtd'+i"
type="text"/>
</div>