ngIf, ngFor, ngClass và hơn thế nữa
Các chỉ thị của Angular thêm hành vi bổ sung vào các phần của ứng dụng của bạn. Tìm hiểu cách sử dụng các lệnh phổ biến và hữu ích nhất.
Bạn có thể thêm các chỉ thị vào HTML trong dự án Angular của mình. Một số kiểm soát cấu trúc đánh dấu của bạn trong khi những người khác tập trung vào các thuộc tính.
Bài viết này sẽ trình bày về sáu chỉ thị Angular phổ biến nhất: ngFor, ngIf, ngClass, ngStyle, ngModel và ngSwitch.
Mục Lục
Hướng dẫn góc là gì?
Các chỉ thị Angular cho phép bạn sử dụng các câu lệnh if và vòng lặp for, đồng thời thêm các hành vi khác vào mã HTML của một dự án Angular.
| Chỉ thị | Sự miêu tả |
|---|---|
| * ngIf | Bạn có thể sử dụng ngIf khi bạn muốn các khối HTML nhất định chỉ hiển thị nếu chúng đáp ứng một điều kiện nhất định. Ví dụ: nếu bạn có một biểu mẫu có cửa sổ bật lên hiển thị sau khi người dùng đã nhập đầu vào cho một trường nhất định. |
| * ngFor | Bạn có thể sử dụng ngFor nếu bạn cần một khối nào đó lặp lại nhiều lần. Ví dụ: nếu bạn có một danh sách các mục và cần hiển thị một div cho mỗi mục. |
| * ngClass | Điều này thêm kiểu có điều kiện bằng cách sử dụng một lớp. Nếu một câu lệnh if đáp ứng điều kiện, nó sẽ áp dụng lớp được chỉ định. |
| * ngStyle | Điều này thêm vào kiểu nội dòng có điều kiện. Nếu một câu lệnh if đáp ứng điều kiện, nó sẽ áp dụng các kiểu được chỉ định. |
| * ngModel | Điều này cho phép bạn thực hiện ràng buộc hai chiều. Điều này có nghĩa là bạn có thể chuyển dữ liệu theo cả hai hướng giữa tệp HTML và TypeScript. Ví dụ: bạn có thể chuyển giá trị của thuộc tính từ tệp TypeScript sang tệp HTML và ngược lại. |
| * ngSwitch | Điều này cho phép bạn thêm một câu lệnh switch với nhiều trường hợp để kiểm tra nhiều giá trị. Dựa trên các trường hợp, các phần tử HTML nhất định sẽ hiển thị. |
Các chỉ thị cấu trúc liên quan đến cấu trúc của các phần tử HTML. Chúng bao gồm ngIf, ngFor và ngSwitch. Các chỉ thị thuộc tính liên quan đến việc thay đổi các thuộc tính của các phần tử HTML. Chúng bao gồm ngStyle, ngClass và ngModel.
Cách sử dụng ngIf
Để sử dụng ngIf, bạn sẽ cần một điều kiện để đánh giá là true cho một phần tử HTML cụ thể để hiển thị.
- Thêm hai biến vào tệp TypeScript của bạn. Trong ví dụ này, có một biến noPlaylists và một biến để lưu trữ danh sách phát. Biến này sẽ đánh giá thành true nếu độ dài của mảng danh sách phát là 0.
noPlaylists: boolean = false;
playlists: any = [];constructor() { }
ngOnInit(): void {
if(this.playlists.length === 0) {
this.noPlaylists = true;
}
} - Trong HTML, thêm câu lệnh * ngIf. Nếu noPlaylists là true, thông báo lỗi có trong khoảng bên dưới sẽ xuất hiện. Nếu không, nó sẽ không. Bạn có thể áp dụng ngIf cho các loại thẻ HTML khác nhau.
<div *ngIf="noPlaylists" class="center">
<span class="errorMessage">There are no playlists available.</span>
</div> - Để thêm thành phần “else” vào câu lệnh if, bạn sẽ cần thêm mã HTML cho phần “else” trong khối mẫu.
<div *ngIf="noPlaylists; else playlistsExist" class="center">
<span class="errorMessage">There are no playlists available.</span>
</div>
<ng-template #playlistsExist>
<div class="center">
<span class="successMessage">Playlists found.</span>
</div>
</ng-template>
Cách sử dụng ngFor
Nếu bạn cần lặp lại một số khối nhất định trên một trang, bạn có thể sử dụng lệnh ngFor.
- Trong tệp TypeScript, hãy thêm các mục vào mảng.
playlists: any = [
{"name": "Rock", "numberOfSongs": 5},
{"name": "Contemporary", "numberOfSongs": 9},
{"name": "Popular", "numberOfSongs": 14},
{"name": "Acoustic", "numberOfSongs": 3},
{"name": "Wedding Songs", "numberOfSongs": 25},
{"name": "Metal", "numberOfSongs": 0},
]; - Trong tệp HTML, thêm câu lệnh * ngFor.
<span class="successMessage">Playlists found.</span>
<div *ngFor="let playlist of playlists" class="item">
<div class="flex">
<span>{{playlist.name}}</span>
<span>{{playlist.numberOfSongs}} songs</span>
</div>
</div>Bên trong ngFor, bạn sẽ có thể tham chiếu đến từng đối tượng trong mảng bằng cách sử dụng biến “danh sách phát”. “playlist.name” và “playlist.numberOfSongs” sẽ in cả hai thuộc tính trong thẻ .
Cách sử dụng ngClass
Bạn có thể thay đổi lớp tạo kiểu mà một div cụ thể sử dụng, dựa trên một điều kiện.
- Thêm hai lớp vào tệp CSS với các kiểu khác nhau. Bạn có thể thêm bất kỳ kiểu tạo kiểu CSS nào bạn muốn, chẳng hạn như các màu nền khác nhau.
.songs {
background-color: #F7F5F2;
}
.noSongs {
background-color: #FFA8A8;
} - Trong vòng lặp for từ bước trước, hãy thêm chỉ thị thuộc tính ngClass. [ngClass]= “playlist.numberOfSongs> 0? ‘songs’: ‘noSongs'” đang sử dụng cùng một toán tử bậc ba mà JavaScript và các ngôn ngữ khác sử dụng.
<div *ngFor="let playlist of playlists" class="item" [ngClass]="playlist.numberOfSongs > 0 ? 'songs' : 'noSongs'">
<div class="flex">
<span>{{playlist.name}}</span>
<span>{{playlist.numberOfSongs}} songs</span>
</div>
</div>Nếu số lượng bài hát lớn hơn 0, nó sẽ áp dụng lớp “bài hát” cho div. Điều này sẽ cung cấp cho div có màu nền xám. Ngược lại, nếu số lượng bài hát bằng 0, nó sẽ áp dụng lớp “noSongs” cho div. Điều này sẽ cung cấp cho div có màu nền đỏ.
Cách sử dụng ngStyle
Thay vì sử dụng ngClass, bạn có thể sử dụng ngStyle nếu bạn muốn áp dụng tạo kiểu nội dòng thay vì tạo kiểu thông qua một lớp.
- Thay đổi ngClass từ bước trước để sử dụng ngStyle thay thế.
<div *ngFor="let playlist of playlists" class="item" [ngStyle]="{'background-color': playlist.numberOfSongs > 0 ? '#F7F5F2' : '#FFA8A8' }>
<div class="flex">
<span>{{playlist.name}}</span>
<span>{{playlist.numberOfSongs}} songs</span>
</div>
</div> - Nếu bạn cần áp dụng nhiều kiểu nội dòng, bạn có thể phân tách từng kiểu bằng dấu phẩy.
[ngStyle]="{'background-color': playlist.numberOfSongs > 0 ? '#F7F5F2' : '#FFA8A8', 'color': playlist.numberOfSongs > 0 ? 'black' : 'darkblue' }"
Cách sử dụng ngModel
Bạn có thể sử dụng ngModel để liên kết hai chiều. Điều này có nghĩa là bạn có thể chuyển giá trị của một thuộc tính giữa cả tệp HTML và TypeScript.
Ví dụ: giả sử bạn có một phần tử đầu vào trong tệp HTML sử dụng ngModel. Thuộc tính ngModel được liên kết với một biến trong tệp TypeScript. Khi bạn nhập một giá trị vào đầu vào, nó sẽ cập nhật biến trong tệp TypeScript.
Các thay đổi được thực hiện đối với thuộc tính trong tệp TypeScript cũng sẽ phản ánh trong HTML nếu các div khác đang sử dụng biến đó.
- Trong app.module.ts, thêm FormsModule vào phần nhập ở đầu tệp và cả vào mảng nhập.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
...
FormsModule
]
}) - Thêm một thuộc tính trong tệp TypeScript để theo dõi thời điểm người dùng đổi tên danh sách phát.
renamingPlaylists: boolean = false; - Đặt danh sách phát ở chế độ công khai để có thể truy cập được khi sử dụng ngModel trong tệp HTML.
public playlists: any = [
...
]; - Thêm hai nút trong tệp HTML, cho phép bạn đổi tên hoặc hủy đổi tên từng danh sách phát.
<button type="button" class="btn btn-info" *ngIf="!renamingPlaylists" (click)="renamingPlaylists=true">Rename Playlists</button>
<button type="button" class="btn btn-info" *ngIf="renamingPlaylists" (click)="renamingPlaylists=false">Stop renaming</button> - Thêm một hộp đầu vào bên trong div của mỗi danh sách phát. Đầu vào sẽ chỉ hiển thị khi bạn nhấp vào Đổi tên danh sách phát cái nút. Hộp nhập này sẽ có ngModel được liên kết với “playlist.name”.
<input type="text" *ngIf="renamingPlaylists" class="form-control input-field" id="name" required [(ngModel)]="playlist.name" />Khi bạn nhập tên mới vào hộp nhập liệu, playlist.name sẽ cập nhật trong tệp TypeScript. Thao tác này sau đó cũng sẽ cập nhật các div khác trong tệp HTML sử dụng playlist.name.
Cách sử dụng ngSwitch
Bạn có thể sử dụng ngSwitch để hiển thị các phần tử nhất định dựa trên các trường hợp trong trường hợp chuyển mạch.
- Thêm thuộc tính “xếp hạng” mới cho các đối tượng bên trong mảng danh sách phát. Thuộc tính này có thể là bất kỳ số nào từ 0 đến 5 (bao gồm).
public playlists: any = [
{"name": "Rock", "numberOfSongs": 5, "rating": 5},
{"name": "Contemporary", "numberOfSongs": 9, "rating": 1},
{"name": "Popular", "numberOfSongs": 14, "rating": 5},
{"name": "Acoustic", "numberOfSongs": 3, "rating": 4},
{"name": "Wedding Songs", "numberOfSongs": 25, "rating": 5},
{"name": "Metal", "numberOfSongs": 0, "rating": 0},
]; - Thêm trường hợp chuyển đổi bên dưới tên và số lượng bài hát cho danh sách phát. Dựa trên số xếp hạng cho danh sách phát, danh sách phát sẽ hiển thị số sao chính xác.
<div class="flex">
<span>{{playlist.name}}</span>
<span>{{playlist.numberOfSongs}} songs</span>
</div>
<div [ngSwitch]="playlist.rating" style="text-align:right">
<div *ngSwitchCase="'1'">★</div>
<div *ngSwitchCase="'2'">★★</div>
<div *ngSwitchCase="'3'">★★★</div>
<div *ngSwitchCase="'4'">★★★★</div>
<div *ngSwitchCase="'5'">★★★★★</div>
<div *ngSwitchDefault>No ratings</div>
</div>
Học thêm với Angular
Bây giờ bạn đã học những kiến thức cơ bản về các chỉ thị Angular, bao gồm cách sử dụng ngIf, ngFor, ngClass, ngStyle, ngModel và ngSwitch. Bạn có thể kết hợp chúng để tạo ra các giao diện người dùng phức tạp hơn. Còn rất nhiều điều để bạn khám phá và tìm hiểu về Angular, bất kể bạn là người mới bắt đầu hay ở trình độ nâng cao.
Đọc tiếp
Giới thiệu về tác giả
