使用ngFor的Angular2綁定數組

Question

我正在使用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顯示數據數組時，我現在處於位置，並且我想在單擊*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>
...

我希望能夠在每次迭代中獲得題詞對象，並使用綁定將數據插入輸入中。

Answer 1

您可以嘗試使用FormArray類將輸入綁定到數組。 我在下面為您編寫了一個快速演示。 最好使用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(''));
  }
}