Angular2 erhalten Werte von dynamisch erstellten Eingänge

Question

Ich habe diese Eingabe, die column dynamisch aus der Liste erstellt werden, jetzt muss ich alle Werte der Eingänge erhalten, wenn eine Methode (getAllValues() vorstellen) tritt

 <div *ngFor="let cell of column; let i = index;"> 
       <!-- Material design input--> 
       <md-input type="{{cell.type}}" 
       value="{{getInputValue(cell)}}" 
       [placeholder]="cell.label"> 
       </md-input> 
     </div> 

Welche wäre die angular2-Methode, um die Werte aller generierten Eingaben zu erhalten?

Answer 1

Der einfachste Weg, es zu tun ist durch ngForm

<form #myForm="ngForm"> 
     <div *ngFor="let cell of column; let i = index;"> 
      <md-input [type]="cell.type" 
      [name]="cell.name"  <!-- Note the 'name' has to be set --> 
      [ngModel]="cell.value" 
      [placeholder]="cell.label"></md-input> 
     </div> 
     <a (click)="getAllValues(myForm)">print values</a> 
</form> 

Dann haben Sie den Zugriff auf myForm.form.value Objekt in getAllValues ​​() Funktion. Plnkr: https://plnkr.co/edit/84mzcNJliMmvszPq3xMm?p=preview

Answer 2

Was ich getan habe ist:

   <md-input #input // NOTICE #input 
          type="{{cell.type}}" 
          value="{{getInputValue(cell) || '--'}}" 
          [placeholder]="cell.label"></md-input> 

in Komponentenklasse:

export class MyComponent { 

    @ViewChildren('input') inputs; 


    public updateData(): void { 
     console.log(this.inputs) //this will give access to id and values (explore it on google chromes console) 
     console.log(this.inputs.toArray().map(x => x.value)) // this gives access to values 
    } 
}