Angular2 使用 ngFor 绑定数组

我使用的是 angular2，在我的表单中，我通常创建一个模型类并将我的对象与表单绑定，然后通过 this.myObject 进行访问。

<div class="form-group ">
 <label class="col-md-3 control-label">Label</label>
 <div class="col-md-6">
  <input type="text" class="form-control" [(ngModel)]="diplome.label" name="label">
 </div>
</div>

稍后获取我的数据

private diplome = new Diplome();
let myData = this.diplome;

当我使用显示数据数组时，我现在处于一个位置*ngFor，我希望在单击提交时将所有它们作为特定类的数组获取。

...
<tr *ngFor="let inscription of inscriptions">
 <td>
   <span *ngIf="inscription._etudiant">{{ inscription._etudiant.label }}</span>
 </td>
 <td>
  <div class="form-group ">
    <div class="col-md-6">
     <input type="number" class="form-control" name="note">
    </div>
  </div>
 </td>
</tr>
...

我希望能够在每次迭代中获取铭文对象，并使用绑定将数据插入到输入中。

您可以尝试使用表格数组 https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html类将您的输入绑定到数组。我在下面为您写了一个快速演示。最好使用 FormBuilder 来设置表单，因为您可以将 Validators 绑定到 FormControls，并且可以简单地使用以下命令获取模型对象FormGroup.value.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'ExampleForm',
  template: `<form [formGroup]="formGroup">
               <div formArrayName="formArray">
                 <div *ngFor="let control of formGroup.controls.formArray.controls; let i=index">
                   <input type="text" formControlName="{{i}}">
                 </div>
               </div>
               <button (click)="addInput()">Add Input</button>
             </form>
             <pre>{{formGroup.value | json}}</pre> `
})
export class ExampleForm {
  private formGroup: FormGroup;

  constructor(private fb: FormBuilder) {
    this.formGroup = this.fb.group({
      formArray: this.fb.array([
        this.fb.control('')
      ])
    });
  }

  addInput() {
    this.formGroup.controls.formArray.push(this.fb.control(''));
  }
}