如何在 ngModel 中绑定动态生成的数组，该数组使用 ngFor 循环?

Question

我的组件中有一个对象，在该对象中有一个数组，我想用ngModel动态绑定它。正在发生单向绑定，但是当我进行一些更改或添加新的数组元素时，模型不会更新。

网页部分

<div class="form-group row">
<label class="col-lg-6 pt-2 label-header" >Group </label>
<button type="button" class="col btn btn-success m-2" (click)="addFieldGroup($event)">Add Group</button>
<button type="button" class="col btn btn-danger m-2" (click)="deleteFieldGroup($event)">Delete Group</button>
<div class="mt-2 col-lg-12 group-name ">
<input *ngFor='let g of foo.general.group' type="text" class="form-control col-lg-12 general m-2" [(ngModel)]="g" value="{{ g }}" [ngModelOptions]="{standalone: true}">
</div>
</div>

组件部分

foo = {
"general": {
"name": "sdfdf",      
"group": ["sd","sdad","asdasdasd"]        
}
addFieldGroup(event){  
this.foo.general.group.push('');
}
deleteFieldGroup(event){  
this.foo.general.group.pop();
}

ngModel 在单独的输入字段中渲染"sd"、"sdad"、"asdasdasd"，但在进行一些更改或添加新的数组元素时，模型没有变化。我只得到以前的模型，即。

"general": {
"name": "sdfdf",      
"group": ["sd","sdad","asdasdasd"]        
}

但是名称字段在双向绑定下完美运行。

Answer 1

尝试如下：

打字稿：

modelGroups = []

模板：

<div class="mt-2 col-lg-12 group-name ">
<input 
*ngFor='let g of foo.general.group;let i = index' 
[(ngModel)]="modelGroups[i]" 
type="text" class="form-control col-lg-12 general m-2"  
value="{{ g }}" 
[ngModelOptions]="{standalone: true}">
</div>

Answer 2

感谢@Adrita给我这个想法，但由于对象真的很大并且有很多数组，所以无论如何我所做的都是一件麻烦

的事情

<div class="mt-2 col-lg-12 group-name ">
<input *ngFor='let g of foo.general.group;let i=index;trackBy:trackByFn' type="text" class="form-control col-lg-12 general m-2" id="form-college-name" [(ngModel)]="foo.general.group[i]" [value]="foo.general.group[i]"  [ngModelOptions]="{standalone: true}">
</div>

在组件中

foo = {
"general": {
"name": "sdfdf",      
"group": []       
}
addFieldGroup(event){  
this.foo.general.group.push('');
}
deleteFieldGroup(event){  
this.foo.general.group.pop();
}
trackByFn(index: any, item: any) {
return index;
}

Answer 3

你的 component.ts 中的变量是 foo。尝试将输入元素的 ngFor 更改为

<input *ngFor='let g of foo.general.group' type="text" class="form-control col-lg-12 general m-2" [(ngModel)]="g" value="{{ g }}" [ngModelOptions]="{standalone:true}">