Angular2 - Erstellen Sie ein neues verschachteltes Objekt in Formular

Question

Ich erhalte den folgenden Fehler beim Rendern eines Formulars in meinem Angular2-Web. Diese Komponente wird verwendet, um ein neues verschachteltes Objekt zu erstellen, daher handelt es sich um ein leeres Formular.

Das Problem tritt in den verschachtelten Parametern des Objekts auf. Das departureDate fällt direkt unter trip (trip.departureDate), daher funktioniert es im Browser. Denn "Stadt" ist verschachtelt inside "von" (newTrip.from.city) bekomme ich den Fehler:

ERROR TypeError: Cannot read property 'city' of undefined at Object.eval [as updateDirectives]

html:

<h3>NEW TRIP </h3> 
    <div class="field"> 
     <h6>Departure: </h6> 
     <input ngui-datetime-picker name="departureDateTime" [(ngModel)]="newTrip.departureDateTime" required> 
    </div> 
    <div class="field marginTop"> 
     <h6>From: </h6> 
     <label for="newTrip">City: </label> 
     <input type="text" name="fromcity" [(ngModel)]="newTrip[from].city" required> 
     <label for="newTrip">Country: </label> 
     <input type="text" name="fromCountry" [(ngModel)]="newTrip[from].country" required> 
    </div> 

    <div class="field marginTop"> 
     <h6>Arrival: </h6> 
     <input ngui-datetime-picker name="arrivalDateTime" [(ngModel)]="newTrip.arrivalDateTime" required> 
    </div> 

component.ts (I initialisieren var "newTrip" mit die "Trip" Modell):

export class NewTripComponent implements OnInit { 
    newTrip: Trip = new Trip(); 
    error: string; 

Reise Modell:

export class Trip { 
    _id: string; 
    owner: string; 
    from: { 
     city: string; 
     country: string; 
     lat: number; 
     lng: number; 
    }; 
    to: { 
     city: string; 
     country: string; 
     lat: number; 
     lng: number; 
    }; 
    departureDateTime: Date; 
    arrivalDateTime: Date; 
    bag: { 
     restrictions: Array<string>; 
     weight: number; 
     dimensions: { 
      high: number; 
      width: number; 
     } 
    } 
    } 

Answer 1

muss man wissen: newTrip[from] ist undefined, deshalb kann man die Stadt nicht bekommen. als Lösung Sie eine Klasse namens Platz schaffen können, die enthält:

class Place{ 
    city: string; 
    country: string; 
    lat: number; 
    lng: number; 
} 

und in Ihrer Klasse Trip:

from: Place = new Place(); 
to : Place = new Place(); 

Hoffe, dass es Sie