Sự khác biệt giữa [(ngModel)] và [ngModel] về trạng thái ràng buộc với thuộc tính?

Đây là một ví dụ mẫu:

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

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

Ở đây cả hai đều làm điều tương tự. Cái nào được ưa thích và tại sao?

[(ngModel)]="overRideRate" là dạng rút gọn của [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"là để ràng buộc overRideRatevớiinput.value
• (ngModelChange)="overRideRate = $event"là cập nhật overRideRatevới giá trị của input.valuethời điểm changesự kiện được phát ra.

Cùng với nhau, chúng là những gì Angular2 cung cấp cho liên kết hai chiều.

[ngModel]="currentHero.name" là cú pháp cho ràng buộc một chiều, trong khi,

[(ngModel)]="currentHero.name" là liên kết hai chiều và cú pháp là từ ghép:

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

Nếu bạn chỉ cần vượt qua mô hình, hãy sử dụng mô hình đầu tiên. Nếu mô hình của bạn cần lắng nghe các sự kiện thay đổi (ví dụ: khi giá trị trường đầu vào thay đổi), hãy sử dụng sự kiện thứ hai.

Nó khá đơn giản [] => component to template () => template to component [(ngModel)]là một dạng hợp đồng của[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

Chi tiết hơn tại đây: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Luồng dữ liệu Angular2 +:

Trong Angular, dữ liệu có thể lưu chuyển giữa mô hình (lớp thành phần ts.file) và chế độ xem (html của thành phần) theo cách thức sau:

1. Từ mô hình đến chế độ xem.
2. Từ chế độ xem đến mô hình.
3. Dữ liệu chảy theo cả hai hướng, còn được gọi là liên kết dữ liệu 2 chiều .

Cú pháp:

mô hình để xem:

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

Cú pháp này còn được gọi là ràng buộc thuộc tính . Bây giờ nếu thuộc overRideRatetính của trường đầu vào thay đổi, chế độ xem sẽ tự động được cập nhật. Tuy nhiên, nếu chế độ xem cập nhật khi người dùng nhập một số, thuộc overRideRate tính sẽ không được cập nhật.

xem mô hình:

(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

Điều xảy ra ở đây là một sự kiện được kích hoạt (trong trường hợp này là sự kiện đầu vào, nhưng có thể là bất kỳ sự kiện nào). Sau đó, chúng ta có thể gọi các phương thức của lớp thành phần hoặc trực tiếp lưu thuộc tính trong một thuộc tính của lớp.

Liên kết dữ liệu 2 chiều:

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

Cú pháp sau được sử dụng để liên kết dữ liệu 2 chiều. Về cơ bản, nó là một đường cú pháp cho cả hai:

1. Mô hình ràng buộc để xem.
2. Chế độ xem ràng buộc với mô hình

Bây giờ một cái gì đó thay đổi bên trong lớp của chúng tôi, điều này sẽ phản ánh khung nhìn của chúng tôi (mô hình để xem) và bất cứ khi nào người dùng thay đổi đầu vào, mô hình sẽ được cập nhật (xem thành mô hình).

[ngModel]đánh giá mã và tạo đầu ra (không có ràng buộc hai chiều) .
[(ngModel)]đánh giá mã và tạo ra một đầu ra và cũng cho phép liên kết hai chiều .