Angular2 ngModel liaison dans le troisième niveau de propriété devient indéfini

Question

Une chose étrange se passe sur ma forme ou peut-être que je ne le fais pas bien, laissez-moi vous expliquer en présentant mon code.

j'ai défini un objet formulaire dans mon composant

form = {}; 

Il y a un bouton sur chaque ligne avec des données que lorsque vous cliquez dessus ouvre une veuve modale et transmet également l'élément comme argument.

<a class="btn btn-warning" (click)="open(item)"><i class="glyphicon glyphicon-pencil"></i></a> 

Ceci est la méthode qui se déclenche et ouvre une fenêtre modale mais affecter aussi l'objet de l'élément pour former objet ci-dessus:

open = (item: any) => { 
    this.inventoryEditModal.open(); //Opens a modal window 

    this.form = item; // the assignment 
} 

L'objet article est disponible sur la vue en l'imprimant comme celui-ci :

{{ form | json }} // i can see all item properties 

la fenêtre modale contient un formulaire dans lequel l'utilisateur va modifier l'élément, donc en gros les champs du formulaire d'entrée doivent se remplir avec des propriétés de l'objet valeurs, mais pour une raison quelconque le troisième niveau est défini et je ne comprends pas pourquoi, permettez-moi de vous montrer une capture d'écran du deuxième niveau

<input type="text" class="form-control" [(ngModel)]="form.alarmSystem" name="wireless"> 

Le troisième niveau s'undefined:

<input type="text" class="form-control" [(ngModel)]="form.alarmSystem.wireless" name="wireless"> 

Ce problème se produit uniquement pour le troisième niveau "object.object.property". Je montre seulement un champ de saisie mais le formulaire contient plus de 8 champs ils ont tous le même problème.

Je ne sais pas ce que je manque ici, mais, logiquement, cela devrait fonctionner. Avez-vous vu ce problème se produire ici et là ou expérimenté vous-même?

Merci d'avance.

Answer 1

Je ne suis pas sûr si cela aide votre cas, mais j'étais dans une situation très similaire.

Ce qui m'a aidé était l'utilisation du "safe-navigation-operator".

Je suppose que ce que vous devez faire est d'ajouter le ? après forme:

<input type="text" class="form-control" [(ngModel)]="form?.alarmSystem.wireless" name="wireless"> 

Les documents peuvent être trouvés ici: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator