Durumu mülke bağlama açısından [(ngModel)] ve [ngModel] arasındaki fark nedir?

İşte bir şablon örneği:

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

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

Burada ikisi de aynı şeyi yapıyor. Hangisi tercih edilir ve neden?

[(ngModel)]="overRideRate" kısa biçimidir [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"bağlama etmektir overRideRateiçininput.value
• (ngModelChange)="overRideRate = $event"güncellemek için overRideRatedeğeriyle input.valuezaman changeolay yayılan edildi.

Birlikte bunlar, Angular2'nin iki yönlü bağlama için sağladığı şeydir.

[ngModel]="currentHero.name" tek yönlü bağlamanın sözdizimi iken,

[(ngModel)]="currentHero.name" iki yönlü bağlama içindir ve sözdizimi şunun bileşiğidir:

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

Sadece modeli geçmeniz gerekiyorsa, ilkini kullanın. Modelinizin değişiklik olaylarını dinlemesi gerekiyorsa (örneğin, giriş alanı değeri değiştiğinde), ikincisini kullanın.

Oldukça basit [] => bileşenden şablona () => bileşene şablon [(ngModel)], sözleşmeli bir[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

Daha fazla ayrıntı burada: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Angular2 + veri akışı:

Angular'da veriler model (bileşen sınıfı ts.file) ve görünüm (bileşenin html'si) arasında aşağıdaki şekillerde akabilir:

1. Modelden görünüme.
2. Görünümden modele.
3. Veri, 2 yönlü veri bağlama olarak da bilinen her iki yönde akar .

Sözdizimi:

görüntülenecek model:

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

Bu sözdizimi, özellik bağlama olarak da bilinir . Şimdi overRideRate, giriş alanının özelliği değişirse, görünüm otomatik olarak güncellenecektir. Ancak, kullanıcı bir sayı girdiğinde görünüm güncellenirse, overRideRate özellik güncellenmeyecektir.

modeli görüntü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

Burada olan şey, bir olayın tetiklenmesidir (bu durumda giriş olayı, ancak herhangi bir olay olabilir). Daha sonra bileşen sınıfının yöntemlerini çağırabilir veya özelliği doğrudan bir sınıf özelliğine kaydedebiliriz.

2 yönlü veri bağlama:

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

Aşağıdaki sözdizimi, 2 yönlü veri bağlama için kullanılır. Temelde her ikisi için de sözdizimsel bir şekerdir:

1. Modeli görüntülemek için bağlama.
2. Görünümü modele bağlama

Şimdi sınıfımızın içinde bir şeyler değişir, bu bizim görüşümüzü yansıtacak (modele bakılacak) ve kullanıcı girdiyi her değiştirdiğinde model güncellenecektir (görünümden modele).

[ngModel]kodu değerlendirir ve bir çıktı oluşturur (iki yönlü bağlama olmadan) .
[(ngModel)]kodu değerlendirir ve bir çıktı oluşturur ve ayrıca iki yönlü bağlamayı etkinleştirir .