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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
| @Component({
selector: 'app-ngfor-demo',
template: `
<div class="demo-container">
<h3>*ngFor 列表渲染演示</h3>
<!-- 基本列表 -->
<div class="section">
<h4>基本列表</h4>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
</div>
<!-- 带索引的列表 -->
<div class="section">
<h4>带索引的列表</h4>
<ul>
<li *ngFor="let item of items; let i = index">
{{ i + 1 }}. {{ item }}
</li>
</ul>
</div>
<!-- 复杂对象列表 -->
<div class="section">
<h4>用户列表</h4>
<div class="user-grid">
<div
*ngFor="let user of users; let i = index; let first = first; let last = last; let even = even; let odd = odd; trackBy: trackByUserId"
class="user-card"
[class.first]="first"
[class.last]="last"
[class.even]="even"
[class.odd]="odd">
<div class="user-header">
<span class="index">#{{ i + 1 }}</span>
<span class="status" [class.active]="user.isActive"></span>
</div>
<div class="user-info">
<h5>{{ user.name }}</h5>
<p>{{ user.email }}</p>
<p>年龄: {{ user.age }}</p>
</div>
<div class="user-actions">
<button (click)="editUser(user)">编辑</button>
<button (click)="deleteUser(user.id)">删除</button>
</div>
</div>
</div>
</div>
<!-- 嵌套循环 -->
<div class="section">
<h4>分类商品</h4>
<div *ngFor="let category of categories; trackBy: trackByCategoryId" class="category">
<h5>{{ category.name }}</h5>
<div class="products">
<div
*ngFor="let product of category.products; trackBy: trackByProductId"
class="product-item">
<span>{{ product.name }}</span>
<span class="price">¥{{ product.price }}</span>
</div>
</div>
</div>
</div>
<!-- 条件循环 -->
<div class="section">
<h4>激活用户</h4>
<div *ngFor="let user of users; trackBy: trackByUserId">
<div *ngIf="user.isActive" class="active-user">
{{ user.name }} - {{ user.email }}
</div>
</div>
</div>
<!-- 空列表处理 -->
<div class="section">
<h4>搜索结果</h4>
<input [(ngModel)]="searchTerm" placeholder="搜索用户...">
<div *ngIf="filteredUsers.length > 0; else noResults">
<div *ngFor="let user of filteredUsers; trackBy: trackByUserId" class="search-result">
{{ user.name }} - {{ user.email }}
</div>
</div>
<ng-template #noResults>
<div class="no-results">
<p *ngIf="searchTerm">没有找到匹配 "{{ searchTerm }}" 的用户</p>
<p *ngIf="!searchTerm">请输入搜索关键词</p>
</div>
</ng-template>
</div>
<!-- 操作按钮 -->
<div class="actions">
<button (click)="addUser()">添加用户</button>
<button (click)="shuffleUsers()">随机排序</button>
<button (click)="sortUsers()">按名称排序</button>
<button (click)="clearUsers()">清空列表</button>
</div>
</div>
`
})
export class NgForDemoComponent implements OnInit {
items = ['苹果', '香蕉', '橙子', '葡萄'];
users = [
{ id: 1, name: '张三', email: 'zhangsan@example.com', age: 25, isActive: true },
{ id: 2, name: '李四', email: 'lisi@example.com', age: 30, isActive: false },
{ id: 3, name: '王五', email: 'wangwu@example.com', age: 28, isActive: true },
{ id: 4, name: '赵六', email: 'zhaoliu@example.com', age: 35, isActive: true }
];
categories = [
{
id: 1,
name: '电子产品',
products: [
{ id: 1, name: '手机', price: 3999 },
{ id: 2, name: '电脑', price: 8999 },
{ id: 3, name: '平板', price: 2999 }
]
},
{
id: 2,
name: '服装',
products: [
{ id: 4, name: 'T恤', price: 99 },
{ id: 5, name: '牛仔裤', price: 299 },
{ id: 6, name: '运动鞋', price: 599 }
]
}
];
searchTerm = '';
get filteredUsers() {
if (!this.searchTerm) {
return [];
}
return this.users.filter(user =>
user.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
user.email.toLowerCase().includes(this.searchTerm.toLowerCase())
);
}
ngOnInit(): void {
console.log('NgFor演示组件初始化');
}
trackByUserId(index: number, user: any): number {
return user.id;
}
trackByCategoryId(index: number, category: any): number {
return category.id;
}
trackByProductId(index: number, product: any): number {
return product.id;
}
editUser(user: any): void {
console.log('编辑用户:', user);
}
deleteUser(userId: number): void {
this.users = this.users.filter(user => user.id !== userId);
}
addUser(): void {
const newId = Math.max(...this.users.map(u => u.id)) + 1;
const newUser = {
id: newId,
name: `用户${newId}`,
email: `user${newId}@example.com`,
age: Math.floor(Math.random() * 40) + 20,
isActive: Math.random() > 0.5
};
this.users.push(newUser);
}
shuffleUsers(): void {
this.users = [...this.users].sort(() => Math.random() - 0.5);
}
sortUsers(): void {
this.users = [...this.users].sort((a, b) => a.name.localeCompare(b.name));
}
clearUsers(): void {
this.users = [];
}
}
|
微信
