J'essaie d'utiliser la liaison de données à sens unique d'Angular2 pour lier une valeur de champ d'entrée à une propriété JSON.
L'objet JSON ressemble à ceci:
[
{
"name": "my name",
"list": [
{
"date": "0101970",
"list": [
{
"timespan": "6-7",
"entries": [
{
"name": ""
},
{
"name": ""
},
{
"name": ""
}
]
}
]
}
]
}
]
Je veux lier la valeur à un spécifique name
attribut de entries
.
C'est comme ça que j'essaye de faire la reliure on way:
<div class="col-md-4" *ngFor="#category of categories">
<div>
<div class="col-md-12">
<h1>{{category.name}}</h1>
</div>
</div>
<div *ngFor="#listentry of category.list">
<div class="row">
<div class="col-md-12">
<h2>{{listentry.date}}</h2>
</div>
</div>
<div class="row" *ngFor="#shift of listentry.list">
<div class="row">
{{shift.timespan}}
</div>
<div class="row" *ngFor="#entry of shift.entries">
<div class="col-md-10">
<input type="text" class="form-control" (ngModel)="entry.name">
</div>
</div>
</div>
</div>
</div>
Ceci est mon composant:
export class InputComponent {
public categories:Category[];
constructor(private _dataService:DataService) {
// ... fetch data from the service here
}
}
Si je comprends bien la liaison de données dans Angular2 (ngModel)="attribute"
lie de la vue au modèle et [ngModel]="attribute"
lie l'inverse.
Alors, quel est le problème avec mon <input type="text" class="form-control" (ngModel)="entry.name">
puis?
Je pourrais utiliser une liaison de données bidirectionnelle au lieu bien sûr, mais j'ai d'autres contraintes (désactivation des éléments de formulaire) qui s'appliquent uniquement après la pression d'un bouton et non sur la saisie de l'utilisateur.
Réponses:
0 pour la réponse № 1Avec
<input type="text" class="form-control" [ngModel]="entry.name">
vous liez la valeur JSON à l'entrée.
(ngModelChange)="model=$event" updates the model when an `ngModelChange` event is emitted.
[(ngModel)]="model" binds two-way
où ngModel
est une directive avec un
@Input() ngModel; // for the [ngModel]="..." bindign
@Output() ngModelChange = EventEmitter(); // for the (ngModelChange)="..." binding
ensemble, ils soutiennent la forme abrégée
[(ngModel)]="model"