angular2 - crée un nouvel objet imbriqué dans le formulaire

Question

Je reçois l'erreur suivante lors du rendu d'un formulaire dans mon site Web Angular2. Ce composant est utilisé pour créer un nouvel objet imbriqué, c'est donc un formulaire vide.

Le problème se produit dans les paramètres imbriqués de l'objet. La date de départ tombe juste sous le voyage (trip.departureDate), donc cela fonctionne dans le navigateur. Parce que "ville" est niché à l'intérieur "de" (newTrip.from.city) je reçois l'erreur:

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 (j'initialiser le var "newTrip" avec le modèle "Trip"):

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

modèle de voyage:

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

vous devez savoir que: newTrip[from] est undefined, c'est pourquoi vous ne pouvez pas obtenir la ville. comme solution, vous pouvez créer une classe appelée Lieu qui contient:

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

et dans votre classe de voyage:

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

Espérons que cela vous aide