Angular
Sử dụng Directive NgFor trong Angular
Giới thiệu nội dung bài viết
Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người cách tạo NgFor là như thế nào?
1. NgFor là gì
Chúng ta sử dụng ngFor để duyệt qua các tập hợp dữ liệu như array, list. Sau đó ta tạo các thành phần web tương ứng với mỗi vòng lặp.
Cú pháp của ngFor như sau:
1
2
3
<html-element ngFor="let <item> of <items>;">
<html-Template></html-Template>
</html-element>
-
: là thẻ web mà ta muốn sử dụng ngFor directive - *ngFor : dấu * tượng trưng cho cú pháp của Angular
- let
- of
: item là giá trị hiện tại của phần tử trong mảng, items chính là mảng các phần tử - of
2. Sử dụng NgFor
Ví dụ sau ta sẽ hiển thị danh sách các bộ films. Ta có component class như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string ="Top 5 Movies" ;
movies: Movie[] =[
{title:'Zootopia',director:'Byron Howard, Rich Moore',cast:'Idris Elba, Ginnifer Goodwin, Jason Bateman',releaseDate:'March 4, 2016'},
{title:'Batman v Superman: Dawn of Justice',director:'Zack Snyder',cast:'Ben Affleck, Henry Cavill, Amy Adams',releaseDate:'March 25, 2016'},
{title:'Captain American: Civil War',director:'Anthony Russo, Joe Russo',cast:'Scarlett Johansson, Elizabeth Olsen, Chris Evans',releaseDate:'May 6, 2016'},
{title:'X-Men: Apocalypse',director:'Bryan Singer',cast:'Jennifer Lawrence, Olivia Munn, Oscar Isaac',releaseDate:'May 27, 2016'},
{title:'Warcraft',director:'Duncan Jones',cast:'Travis Fimmel, Robert Kazinsky, Ben Foster',releaseDate:'June 10, 2016'},
]
CompositeKey (index,item){
return item.title + item.director ;
}
}
class Movie {
title : string;
director : string;
cast : string;
releaseDate : string;
}
Chúng ta sử dụng ngFor để duyệt qua từng bộ phim trong mảng movides ở file html như sau:
1
2
3
4
5
6
7
8
<h1> </h1>
<ul>
<li *ngFor="let movie of movies">
-
</li>
</ul>
## 3. Sử dụng NgFor mảng trong mảng
Ví dụ ta có danh sách các nhân viên, trong mỗi nhân viên lại có danh sách các skills.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
employees = [
{
name: "Rahul", email: "rahul@gmail.com",
skills: [{ skill: 'Angular', exp: '2' },{ skill: 'Javascript', exp: '7' },{ skill: 'TypeScript', exp: '3' }
]
},
{
name: "Sachin", email: "sachin@gmail.com",
skills: [{ skill: 'Angular', exp: '1' },{ skill: 'Android', exp: '3' },{ skill: 'React', exp: '2' }
]
},
{
name: "Laxman", email: "laxman@gmail.com",
skills: [{ skill: 'HTML', exp: '2' },{ skill: 'CSS', exp: '2' },{ skill: 'Javascript', exp: '1' }
]
}
]
- Chúng ta sẽ sử dụng 2 vòng ngFor như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class='table-responsive'>
<table class='table table-bordered table-sm '>
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Mail</th>
<th>Skills</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees;">
<td></td>
<td></td>
<td>
<table class='table table-sm '>
<tbody>
<tr *ngFor="let skill of employee.skills;">
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
## 4. Sử dụng Index
Chúng ta có thể sử dụng biến local index trong ngFor để xem số thứ tự của mỗi phần tử trong mảng.
1
2
3
4
5
6
7
<tr *ngFor="let movie of movies; let i=index;">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
## 5. Format dòng chẵn dòng lẻ trong table
1
2
3
4
5
6
7
8
<tr *ngFor="let movie of movies; let i=index; let o= odd; let e=even;"
[ngClass]="{ odd: o, even: e }">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
## 6. Lấy phần tử đầu và cuối trong mảng
1
2
3
4
5
6
7
<tr *ngFor="let movie of movies; let i=index; let first= first; let last=last;" [ngClass]="{ first: first, last: last }">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm
Các khoá học lập trình MIỄN PHÍ tại đây
Comments
