ความแตกต่างระหว่าง [(ngModel)] และ [ngModel] สำหรับการผูกสถานะกับคุณสมบัติ

นี่คือตัวอย่างเทมเพลต:

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

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

ที่นี่ทั้งสองคนทำสิ่งเดียวกัน ชอบอันไหนและเพราะอะไร?

[(ngModel)]="overRideRate" คือรูปแบบสั้น ๆ ของ [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"คือการผูกoverRideRateกับไฟล์input.value
• (ngModelChange)="overRideRate = $event"คือการอัปเดตoverRideRateด้วยค่าของinput.valueเวลาที่changeปล่อยเหตุการณ์

พวกเขารวมกันเป็นสิ่งที่ Angular2 ให้สำหรับการผูกสองทาง

[ngModel]="currentHero.name" เป็นไวยากรณ์สำหรับการผูกทางเดียวในขณะที่

[(ngModel)]="currentHero.name" มีไว้สำหรับการผูกแบบสองทางและไวยากรณ์เป็นสารประกอบจาก:

[ngModel]="currentHero.name" และ (ngModelChange)="currentHero.name = $event"

หากคุณต้องการผ่านโมเดลเท่านั้นให้ใช้แบบแรก หากโมเดลของคุณต้องการรับฟังเหตุการณ์การเปลี่ยนแปลง (เช่นเมื่อค่าฟิลด์อินพุตเปลี่ยนแปลง) ให้ใช้อันที่สอง

มันค่อนข้างง่าย [] => component to template () => template to component [(ngModel)]คือรูปแบบที่ทำสัญญา[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

ดูรายละเอียดเพิ่มเติมที่นี่: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Angular2 + การไหลของข้อมูล:

ใน Angular ข้อมูลสามารถไหลระหว่างโมเดล (คอมโพเนนต์คลาส ts.file) และมุมมอง (html ของคอมโพเนนต์) ตามลักษณะต่อไปนี้:

1. จากโมเดลสู่มุมมอง
2. จากมุมมองไปยังแบบจำลอง
3. กระแสข้อมูลในทั้งสองทิศทางยังเป็นที่รู้จัก2 ข้อมูลวิธีที่มีผลผูกพัน

ไวยากรณ์:

รุ่นที่จะดู:

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

รูปแบบนี้เป็นที่รู้จักกันเป็นสถานที่ให้บริการที่มีผลผูกพัน ตอนนี้หากoverRideRateคุณสมบัติของช่องป้อนข้อมูลเปลี่ยนมุมมองโดยอัตโนมัติจะได้รับการอัปเดต อย่างไรก็ตามหากมุมมองอัปเดตเมื่อผู้ใช้ป้อนตัวเลขoverRideRate คุณสมบัติจะไม่ถูกอัปเดต

ดูรุ่น:

(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

สิ่งที่เกิดขึ้นที่นี่คือเหตุการณ์ถูกทริกเกอร์ (ในกรณีนี้คือเหตุการณ์อินพุต แต่อาจเป็นเหตุการณ์ใดก็ได้) จากนั้นเราสามารถเรียกใช้เมธอดของคลาสคอมโพเนนต์หรือบันทึกคุณสมบัติโดยตรงในคุณสมบัติคลาส

การผูกข้อมูล 2 ทาง:

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

ไวยากรณ์ต่อไปนี้ใช้สำหรับการผูกข้อมูลแบบ 2 ทาง โดยพื้นฐานแล้วมันเป็นน้ำตาลที่เป็นประโยคสำหรับทั้งสอง:

1. รูปแบบการผูกเพื่อดู
2. มุมมองที่เชื่อมโยงกับโมเดล

ตอนนี้มีการเปลี่ยนแปลงบางอย่างในชั้นเรียนของเราสิ่งนี้จะสะท้อนถึงมุมมองของเรา (โมเดลที่จะดู) และเมื่อใดก็ตามที่ผู้ใช้เปลี่ยนอินพุตโมเดลจะถูกอัปเดต (ดูเป็นโมเดล)

[ngModel]ประเมินรหัสและสร้างออก(ไม่มีสองทางผูกพัน)
[(ngModel)]ประเมินรหัสและสร้างออกและยังช่วยให้สองทางที่มีผลผูกพัน