Différence entre [(ngModel)] et [ngModel] pour lier l'état à une propriété ?

Question

Voici un exemple de modèle :

 <input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">

 <input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">

Ici, les deux font la même chose. Lequel est préféré et pourquoi ?

Answer 1

[(ngModel)]="overRideRate" est la forme courte de [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate" est de lier overRideRate à la input.value
• (ngModelChange)="overRideRate = $event" est de mettre à jour overRideRate avec la valeur de input.value lorsque le change a été émis.

Ensemble, ils constituent ce qu'Angular2 fournit pour la liaison bidirectionnelle.

Answer 2

[ngModel]="currentHero.name" est la syntaxe pour la liaison unidirectionnelle, tandis que,

[(ngModel)]="currentHero.name" est pour la liaison bidirectionnelle, et la syntaxe est composée de :

[ngModel]="currentHero.name" et (ngModelChange)="currentHero.name = $event"

Si vous avez seulement besoin de passer le modèle, utilisez la première. Si votre modèle doit écouter les événements de changement (par exemple, lorsque la valeur d'un champ d'entrée change), utilisez le second.

Answer 3

C'est assez simple () => composant vers modèle () => modèle vers composant [(ngModel)] est une forme contractée de [ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

Plus de détails ici : https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Answer 4

Flux de données Angular2+ :

En Angular, les données peuvent circuler entre le modèle (classe du composant, fichier ts) et la vue (html du composant) de la manière suivante :

1. Du modèle à la vue.
2. De la vue au modèle.
3. Les données circulent dans les deux sens, également appelées Liaison de données à 2 voies .

Syntaxe :

modèle à visualiser :

<input type="text" [ngModel]="overRideRate">

Cette syntaxe est également connue sous le nom de liaison de propriété . Maintenant, si le overRideRate du champ de saisie change, la vue est automatiquement mise à jour. Cependant, si la vue est mise à jour lorsque l'utilisateur saisit un nombre, la propriété de la zone de saisie sera automatiquement mise à jour. overRideRate ne sera pas mis à jour.

de la vue au modèle :

(input)="change($event)"            // calling a method called change from the component class
(input)="overRideRate=$event.target.value" // on input save the new value in the title property

Ce qui se passe ici, c'est qu'un événement est déclenché (dans ce cas, un événement d'entrée, mais il peut s'agir de n'importe quel événement). Nous pouvons alors appeler des méthodes de la classe du composant ou enregistrer directement la propriété dans une propriété de classe.

Liaison de données à double sens :

<input [(ngModel)]="overRideRate" type="text" >

La syntaxe suivante est utilisée pour la liaison de données bidirectionnelle. Il s'agit essentiellement d'un sucre syntaxique pour les deux :

1. Lier le modèle à la vue.
2. Lier la vue au modèle

Maintenant, si quelque chose change à l'intérieur de notre classe, cela reflétera notre vue (model to view), et chaque fois que l'utilisateur modifie l'entrée, le modèle sera mis à jour (view to model).