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"]        
    }

但是name字段可以通过两种方式完美地工作。

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

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

3 个答案: