如何在与ngFor循环的ngModel中绑定动态生成的数组？

Question

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

Html部分

 <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

你的 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}">

Answer 3

感谢@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;
  }

如何在与ngFor循环的ngModel中绑定动态生成的数组？

How to bind dynamically generated array in ngModel, which is looping with ngFor?

angular

angular8