angular - Angualr2- ngFor 内の ngModel が機能しない。モデルは正しく更新されますが、ビューにいくつかのエラーがあります

Question

Angular2 を使用してトリップ プランナーを作成する小さなタスクに取り組んでいます。ワークフローは次のとおりです。ユーザーは、出発地と目的地、および途中の停留所の数を入力します。ユーザーが [Go] ボタンを送信すると、Planner テーブルが表示され、ユーザーは中間停止ポイントを入力したり、停止ポイントを追加/削除したりできます。スクリーンショットに示されているように、どういうわけか、目的の出力が得られません。

新しい停止ポイントを追加すると、これが得られます...

希望の出力....

これは、Tripdetails オブジェクトがどのように見えるかです。オブジェクトとビューの違いを確認してください。

コードは次のとおりです。 Trip.ts

export class Trip {
    startPoint:string;
    destination:string;
    stops:number;
}

TripDetails.ts

export class TripDetail {
    startPoint:string;
    destination:string;
}

app.component.ts

import { Component } from '@angular/core';
import { Trip } from './Trip';
import { TripDetail } from './TripDetails';

@Component({
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: 'app.component.html'
})

export class AppComponent  { 
    trip: Trip = {
        startPoint : "",
        destination : "",
        stops : 0
    };
    tripDetails: TripDetail[];

    clicked(startPoint:string, destination:string, stops:string):void {
        let length = parseInt(stops);
            this.trip.startPoint = startPoint;
            this.trip.destination = destination;
            this.trip.stops = length;
            this.tripDetails = [];
        for (let i=0 ; i< length; i++) {
            let tripDetail :TripDetail={
                startPoint: "",
                destination: ""
            }
            if( i==0) {
                tripDetail.startPoint = this.trip.startPoint;
            }
            if( i== length-1) {
                tripDetail.destination = this.trip.destination;
            }
            this.tripDetails.push(tripDetail);
        }
    }

    syncData(index:number, locationType:string) {
        if(locationType == 'destinationLocation') {
            this.tripDetails[index + 1].startPoint = this.tripDetails[index].destination; 

        }
        else if (locationType == 'sourceLocation') {
            this.tripDetails[index - 1].destination = this.tripDetails[index].startPoint; 
        }
    }

    addStop(index:number):void {
        let stop:TripDetail={
            startPoint:"newStop",
            destination:"newStop"
        }
        this.tripDetails.splice(index,0,stop);
    }   

    removeStop(index:number):void{
        let destination = this.tripDetails[index].destination,
            arrlength = this.tripDetails.length;
        if(index==0){
            return;
        }
        else if( index== arrlength-1) {
            this.tripDetails[index-1].destination = this.tripDetails[index].destination;
            this.tripDetails.splice(index,1);
        }
        else{
            this.tripDetails.splice(index,1);
            this.tripDetails[index].destination= destination;   
        }
    }


}

app.component.html

<div class="container content">
    <div>
        <form>
            <label for="startPoint">From:</label>
            <input class="form-control" type="text" placeholder="Enter start point" name="startPoint" [(ngModel)] = "trip.startPoint" >

            <label for="destination">To:</label>
            <input class="form-control" type="text" name="destination" placeholder="Enter destiantion" id="destination" [(ngModel)]="trip.destination" >

            <label for="Stops">Stops:</label>
            <input class="form-control" type="text" placeholder="Enter number of stops"  name="stops" id="stops" [(ngModel)]="trip.stops"  >

            <div class="go-btn">
                <button class="btn btn-primary" (click)="clicked(trip.startPoint,trip.destination,trip.stops)">Go</button>
            </div>
            <div *ngIf = "trip.stops && trip.startPoint && trip.destination" class="trip-table  table-bordered">
                <table class="table table-stripped">
                    <thead class="thead">
                        <tr scope="row">
                        <th>FROM</th><th>TO</th>
                    </tr>
                    </thead>
                    <tr *ngFor= " let stops of tripDetails; let i=index; let first = first; let last= last; trackBy: index ">
                        <td>

                            <input type="text" class="form-control"  name="locationFrom-{{i}}" [(ngModel)]= "stops.startPoint"  (input)="syncData(i, 'sourceLocation')" >
                        </td>
                        <td>

                            <input type="text" class="form-control"  name="locationTo-{{i}}" [(ngModel)]= "stops.destination"  (input)="syncData(i, 'destinationLocation')" >
                        </td>
                        <td>
                            <button class="btn btn-primary" (click)="addStop(i)">+</button>
                        </td>
                        <td>
                            <button class="btn btn-primary" (click)="removeStop(i)" >-</button>
                        </td>
                    </tr>
                </table>                
            </div>
        </form>
    </div>
</div>  

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule , FormsModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }