2015-11-25 1 views
4

J'essaie d'écrire une entrée de données avec Angular 2 et Typescript, mais j'ai un problème lors de la mise à jour du modèle. Comme je l'ai compris, seuls les types primitifs peuvent être liés à ng-modèle. Mais dans mon modèle j'ai des objets que je veux mettre à jour. Existe-t-il une méthode angulaire spécifique au lieu de charger l'objet trou avec la propriété modifiée qui est liée à ng-model?Peut-on mettre à jour des objets dans le modèle?

C'est le modèle:

export class Project { 
    public id: number; 
    private title: string; 
    private region: Region; 
} 

C'est la classe composante angulaire:

@Component({...}) 
export class ProjectForm { 
    public project: Project; 
    public regions: Array<Region>; 
} 

Ceci est le point de vue de la ProjectForm:

... 
<select id="region" [(ng-model)]="project.region.id"> 
    <option *ng-for="#region of regions" [value]="region.id"> 
     {{ region.name }} 
    </option> 
</select> 

Répondre

1

Oui! Les propriétés des objets peuvent être liées à ngModel. Voir Plnkr

Parce que,

<input [(ngModel)]="project.region.id" /> 

ventile à

<input [ngModel]="project.region.id" (ngModelChange)="project.region.id = $event" /> 

qui est juste même que

<input [value]="project.region.id" (input)="project.region.id = $event.target.value" > 

Donc, comme vous pouvez le voir est juste valeur passe d'un endroit à anot elle, cette valeur (primitive ou non) peut être n'importe où.

+0

Il est à noter que '? .' (opérateur Elvis) ne peut pas être utilisé pour la liaison bidirectionnelle à des objets. Au moins pas actuellement. –

+0

@ GünterZöchbauer Je ne savais pas cela, merci pour le partage :) –

+1

'[ngModel] =" projet? .region.? Id "' fonctionne bien mais '(ngModelChange) =" projet? .region.? Id = $ événement "' n'est pas supporté. –