Differenza tra [(ngModel)] e [ngModel] per l'associazione dello stato alla proprietà?


89

Ecco un esempio di modello:

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

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

Qui entrambi fanno la stessa cosa. Quale è il preferito e perché?


7
[ngModel]- è solo associazione di proprietà, non a due vie. Quindi l'immissione di un nuovo valore non verrà aggiornato overRideRate.
VadimB

2
[(ngModel)] è un binding a due vie che proviene da Angular 2. [ngModel] è solo per presentarsi.
David Doan,

2
Avviso di deprecazione : in Angular 6, ( angular.io/api/forms/FormControlName#use-with-ngmodel ) afferma questo: Il supporto per l'utilizzo della proprietà di input ngModel e dell'evento ngModelChange con le direttive del modulo reattivo è stato deprecato in Angular v6 e sarà rimosso in Angular v7. Vedere anche: ( stackoverflow.com/questions/50371079/... )
sboggs11

1
sboggs10 Il collegamento che hai fornito si riferisce alla combinazione di ngModel con forme reattive, questo non è correlato alla domanda nella quasi totalità dei casi.
Cesar Leonardo Ochoa Contreras

Ecco una buona spiegazione [(ngModel)], a due vie Associazione dati in angolare
Cateyes

Risposte:


147

[(ngModel)]="overRideRate" è la forma abbreviata di [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

  • [ngModel]="overRideRate"è legarsi overRideRateainput.value
  • (ngModelChange)="overRideRate = $event"è quello di aggiornare overRideRatecon il valore di input.valuequando changeè stato emesso l' evento.

Insieme sono ciò che Angular2 fornisce per l'associazione a due vie.


58

[ngModel]="currentHero.name" è la sintassi per l'associazione unidirezionale, mentre,

[(ngModel)]="currentHero.name" è per l'associazione a due vie e la sintassi è composta da:

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

Se devi solo passare il modello, usa il primo. Se il tuo modello deve ascoltare gli eventi di modifica (ad esempio, quando il valore del campo di input cambia), usa il secondo.



11

Flusso di dati Angular2 +:

In Angular i dati possono fluire tra il modello (componente classe ts.file) e la visualizzazione (html del componente) nei seguenti modi:

  1. Dal modello alla vista.
  2. Dalla vista al modello.
  3. I dati fluiscono in entrambe le direzioni, noto anche come associazione dati a 2 vie .

Sintassi:

modello da visualizzare:

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

Questa sintassi è nota anche come associazione di proprietà . Ora se la overRideRateproprietà del campo di input cambia, la vista verrà automaticamente aggiornata. Tuttavia, se la vista si aggiorna quando l'utente inserisce un numero, la overRideRate proprietà non verrà aggiornata.

visualizza per modellare:

(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

Quello che succede qui è che viene attivato un evento (in questo caso evento di input, ma potrebbe essere qualsiasi evento). Possiamo quindi chiamare i metodi della classe del componente o salvare direttamente la proprietà in una proprietà della classe.

Associazione dati a 2 vie:

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

La sintassi seguente viene utilizzata per l'associazione dati a 2 vie. È fondamentalmente uno zucchero sintattico per entrambi:

  1. Modello vincolante da visualizzare.
  2. Vista vincolante al modello

Ora qualcosa cambia all'interno della nostra classe, questo rifletterà la nostra vista (da modello a vista), e ogni volta che l'utente cambia l'input il modello verrà aggiornato (da vista a modello).


5

[ngModel]valuta il codice e genera un output (senza associazione a due vie) .
[(ngModel)]valuta il codice e genera un output e abilita anche l'associazione a due vie .

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.