Ví dụ data binding trong Angular 4

Ví dụ data binding trong Angular 4 là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ data binding trong Angular 4 sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và AngularJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Data binding là cơ chế lấy dữ liệu từ trong component và đưa ra view. Data Binding đã có từ AngularJS, Angular 2 và giờ cũng có ở Angular 4.

Để bind dữ liệu ra view, ta sử dụng cặp ngoặc nhọn {{ten_bien}}. ten_bien chính là tên biến bạn đặt phía bên trong file component.ts

Trong bài này, chúng ta sẽ tìm hiểu về cơ chế data binding trong angular 4 thông qua vòng lặp ngFor và điều kiện ngIf nhé.

Data binding với ngFor

Ví dụ này chúng ta sẽ tạo ra 1 dropdown list chứa các tháng trong năm.

Đầu tiên, ta khai báo mảng dữ liệu chứa các tháng trong năm bên trong file app.component.ts như sau

app.component.ts

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Angular 4 Project!';
    // Khai báo mảng chứa các tháng
    months = ["Tháng 1", "Tháng 2", "Tháng 3",
                "Tháng 4", "Tháng 5", "Tháng 6",
                "Tháng 7", "Tháng 8", "Tháng 9",
                "Tháng 10", "Tháng 11", "Tháng 12"];
} 

Tiếp đó, ta bind dữ liệu tháng khai báo bên file component ra view

app.component.html

<div> Months :
    <select>
        <option *ngFor="let i of months">{{i}}</option>
    </select>
</div> 

months là một mảng chứa các tháng. Câu lệnh let i of months đưa lần lượt dữ liệu các phần tử của mảng months vào biến i, nghĩa là i sẽ lần lượt chứa các giá trị Tháng 1, Tháng 2,..., tháng 12. Biến i nằm trong cặp ngoặc {{i}} sẽ bind dữ liệu của i ra view.

Vòng for đặt chạy trong thẻ option nên sẽ sinh ra 12 thẻ option con như sau

html sinh ra từ câu lệnh NgFor

<option>Tháng 1</option>
<option>Tháng 2</option>
<option>Tháng 3</option>
<option>Tháng 4</option>
<option>Tháng 5</option>
<option>Tháng 6</option>
<option>Tháng 7</option>
<option>Tháng 8</option>
<option>Tháng 9</option>
<option>Tháng 10</option>
<option>Tháng 11</option>
<option>Tháng 12</option> 

Ta nhận được kết quả như hình

Data binding với ngIf

Cú pháp với If trong angular 4 như sau:

app.component.html

<p *ngIf="condition; then true_condition else false_condition"></p>
<ng-template #true_condition>Điều kiện đúng</ng-template>
<ng-template #false_condition>Điều kiện sai</ng-template> 

Vế then true_condition có thể được lược bỏ và viết trực tiếp nội dung điều kiện đúng vào trong thẻ chứa ngIf, như sau

<p *ngIf="condition; else false_condition">Điều kiện đúng</p>
<ng-template #false_condition>Điều kiện sai</ng-template> 

Trong trường hợp có cả template true_condition và có cả nội dung trong thẻ ngIf thì template #true_condition sẽ được ưu tiên hơn. Nghĩa là nội dung bên trong template #true_condition sẽ được sinh ra, còn nội dung trong ngIf sẽ không được sinh ra

<p *ngIf="condition; then #true_condition else false_condition">Điều kiện đúng này sẽ không được sinh ra</p>
<ng-template #true_condition>Điều kiện đúng này sẽ được sinh ra</ng-template>
<ng-template #false_condition>Điều kiện sai</ng-template> 

Thử lấy 1 ví dụ nho nhỏ: đặt 1 biến là is_available trong component. Nếu giá trị của biến này là true thì in ra "điều kiện đúng", ngược lại, nếu giá trị của biến này là false thì in ra "điều kiện sai"

Đầu tiên, khai báo biến is_available trong component:

app.component.ts

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
 
export class AppComponent {
    title = 'Angular 4 Project!';
    //array of months.
    months = ["Tháng 1", "Tháng 2", "Tháng 3",
                "Tháng 4", "Tháng 5", "Tháng 6",
                "Tháng 7", "Tháng 8", "Tháng 9",
                "Tháng 10", "Tháng 11", "Tháng 12"];
    is_available = false; // Declare varialbe is_available
}  

Tiếp theo, thêm điều kiện để hiển thị dữ liệu

app.component.html

<p *ngIf="is_available; then true_condition else false_condition"></p>
<ng-template #true_condition><p>Điều kiện đúng</p></ng-template>
<ng-template #false_condition><p>Điều kiện sai</p></ng-template> 

Hy vọng với bài viết về Ví dụ data binding trong Angular 4 đã giải đáp giúp bạn phần nào về kiến thức lập trình AngularJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!