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

【问题标题】：How to bind dynamically generated array in ngModel, which is looping with ngFor?如何在与ngFor循环的ngModel中绑定动态生成的数组？
【发布时间】：2019-09-03 09:11:46
【问题描述】：

我的组件中有一个对象，该对象中有一个数组，我想用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"]        
    }

但是 name 字段可以完美地使用两种方式绑定。

【问题讨论】：

标签： angular angular8

【解决方案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>

【讨论】：

你能分享一下stackbiltz
请看我的回答，我没有制作新数组，但它正在工作。唯一的问题是输入框一输入字符就会失去焦点。

【解决方案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;
  }

【讨论】：

没有可重现的链接，很难看出是什么导致焦点松动
解决了，我需要一个 trackBy 函数，我正在用我的新代码编辑我的答案。感谢您的帮助。

【解决方案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}">

【讨论】：