Chào chúng ta, từ bây giờ anh đã giải đáp rất nhiều người cách thực hiện data binding là như vậy nào?
Databinding là kỹ thuật khu vực dữ liệu được nhất quán thân component với tầng view (template tệp tin html). Ví dụ lúc người tiêu dùng update data ở tầng view thì Angular cũng cập nhật quý hiếm kia nghỉ ngơi component.
Bạn đang xem: Data binding là gì
Data binding trong Angular hoàn toàn có thể chia nhỏ ra làm 2 nhóm. Đó là one way binding (binding 1 chiều) cùng two way binding (binding 2 chiều).
One way binding thì tài liệu được truyền 1 chiều. Có thể từ bỏ view quý phái component hoặc ngược lại trường đoản cú component sang trọng view.
Từ component sang view họ áp dụng Interpolation & Property Binding để hiển thị dữ liệu nhỏng sau: Chúng ta sử dụng nhằm hiển thị cực hiếm trường đoản cú component sang view.Xem thêm: Cách Tăng Cường Sinh Lý Nam Giới, 23 Loại Thực Phẩm Tăng Cường Sinh Lý Cho Nam Giới
lấy ví dụ ta có component là
1234567891011 | import Component from " angular/core"; Component( selector: "app-root", templateUrl: "./tiện ích.component.html", styleUrls: <"./phầm mềm.component.css">)export class AppComponent firstName= "Sachin"; lastName=”Tendulkar” |
1 | Welcome, firstName lastName |
123 | Example 1 |
1234567891011121314 | import Component from " angular/core"; Component( selector: "app-root", templateUrl: "./phầm mềm.component.html", styleUrls: <"./app.component.css">)export class AppComponent title="Angular Property Binding Example" //Example 1 isDisabled= true; |
1 | (click)="onSave()">Save |
12345678910111213141516 | import Component from " angular/core"; Component( selector: "app-root", templateUrl: "./phầm mềm.component.html", styleUrls: <"./phầm mềm.component.css">)export class AppComponent firstName= "Sachin"; lastName=”Tendulkar” onSave() //cách xử trí nút ít Save |
2 way binding thì hữu ích Lúc bản thân làm cho size. Chúng ta sử dụng ngModel nhằm thực hiện việc binding 2D.
1234 | Example 2type="text" name="value" <(ngModel)>="value"> You entered (click)="clearValue()">Clear |
12345678910111213141516 | import Component from " angular/core"; Component( selector: "app-root", templateUrl: "./phầm mềm.component.html", styleUrls: <"./tiện ích.component.css">)export class AppComponent value=""; clearValue() this.value=""; |