フォームフィールドを動的に追加した後のAngular2のログ値

Question

choicesアレイの各オブジェクトの値をコンソールログに記録しようとしています。私は現在、選択肢配列にオブジェクトを記録することができますが、すべての値は空です。私は各オブジェクトのためにtimeZonePicker: "", startTimeInput: "", endTimeInput: ""を見ている。私は選択肢の配列を追加したり削除したりすることができますが、値を記録することはできません。私はいろいろなことを試みましたが、それでも失敗しました。

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

以下はコンポーネントです。

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

本当に助けていただきありがとうございます。

Answer 1

私のエラーが分かりました。私はtrackBy（私は最初ではなかった）と[（ngModel）]を使う必要がありました。私は片方向バインディングのみを使用していましたが、私は2つの方法が必要でした。誰かが学習のためのコードを見たいと思ったら、ちょうどコメントし、私はそれを喜んで共有します。