Angular2-Protokollwerte nach dem dynamischen Hinzufügen von Formularfeldern

Question

Ich versuche, die Werte der einzelnen Objekte im Choice-Array über die Konsole zu protokollieren. Ich bin derzeit in der Lage, die Objekte im Choice-Array zu protokollieren, aber alle Werte sind leer. Ich sehe timeZonePicker: "", startTimeInput: "", endTimeInput: "" für jedes Objekt. Ich bin in der Lage, zu addieren und aus dem Auswahlarray zu entfernen und den Schlüssel zu notieren, aber ich kann den Wert nicht notieren. Ich habe viele verschiedene Dinge ausprobiert, aber immer noch nicht erfolgreich.

<div class="container"> 
    <div class="row"> 
     <div class="col-md-9"> 
      <div *ngFor="let choice of choices; trackBy=customTrackBy" class="form-inline"> 
       <select [ngModel]="choice.timeZonePicker" class="form-control" id="timeZonePicker"> 
        <option *ngFor="let timeZone of timeZones" [selected]="timeZone.chosenTimeZone == '(GMT) Western Europe Time, London, Lisbon, Casablanca, Greenwich'">{{ timeZone.chosenTimeZone }}</option> 
       </select> 
        <input [ngModel]="choice.startTimeInput" type="time" class="form-control" id="startTimeInput"> 
        <input [ngModel]="choice.endTimeInput" type="time" class="form-control" id="endTimeInput"> 
      </div> <!-- end form field div --> 
      <div class="container"> 
       <button (click)="onSubmit()" class="btn btn-primary">Submit</button> 
      </div> 
      <div class="container"> 
       <button class="pull-left btn btn-success" (click)="addNewChoice()">Add Field</button> 
       <button class="pull-left btn btn-danger" (click)="removeChoice()">Remove Field</button> 
      </div> 
     </div> <!-- end col-md-9 --> 
    </div> <!-- end row --> 
</div> <!-- end container --> 

Unten ist die Komponente.

export class TimeZonesComponent { 
constructor(){} 

timeZones = [ 
     { val: -12, chosenTimeZone: '(GMT -12:00) Eniwetok, Kwajalein'}, 
     { val: -11, chosenTimeZone: '(GMT -11:00) Midway Island, Samoa'},....]; 

choices = [ 
    { 
    timeZonePicker: '', 
    startTimeInput: '', 
    endTimeInput: '' 
    }, 
    {   
    timeZonePicker: '', 
    startTimeInput: '', 
    endTimeInput: '' 
    }]; 

addNewChoice(){ 
    var dataObj = {   
     timeZonePicker: '', 
     startTimeInput: '', 
     endTimeInput: '' 
    }; 
    this.choices.push(dataObj); 
} 

removeChoice(){ 
    var lastItem = this.choices.length - 1; 
    this.choices.splice(lastItem); 
    console.log(this.choices); 
} 

onSubmit(){ 
    console.log(this.choices); 
} 

customTrackBy(index: number, obj: any){ 
    return index; 
} 
} 

Ich schätze wirklich jede Hilfe.

Answer 1

Ich habe meinen Fehler gefunden. Ich musste trackBy verwenden (was ich ursprünglich nicht war) und [(ngModel]). Ich benutzte nur einen Weg, aber ich brauchte zwei Wege. Wenn jemand den Code zum Lernen sehen möchte, einfach kommentieren und ich werde es gerne teilen.