Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit53638d1

Browse files
committed
add 显示用户列表
1 parent1b1b1ba commit53638d1

File tree

10 files changed

+351
-11
lines changed

10 files changed

+351
-11
lines changed

‎SUMMARY.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
*[用户管理](docs/user-management.md)
77
*[修改 AppComponent 组件](docs/edit-app-component.md)
88
*[用户编辑器](docs/user-editor.md)
9+
*[展示用户列表](docs/user-list.md)
910
*[参考资料](docs/references.md)
1011
* To be continued ...未完待续...
1112

‎docs/user-list.md‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
#展示用户列表
2+
3+
本节，我们将展示用户列表。当选中某个用户时，能够查看到该用户的详细信息。
4+
5+
6+
##创建模拟（mock）的用户数据
7+
8+
9+
由于目前，我们的应用都是纯粹的客户端程序，并非涉及数据的存储以及接口的访问，所以，我们只能模拟（mock）一些用户列表数据。
10+
11+
12+
在 src/app/ 文件夹中创建一个名叫 mock-users.ts 的文件。 定义一个包含十个用户的常量数组 USERS，并导出它。 该文件是这样的。
13+
14+
```ts
15+
import {User }from'./user';
16+
17+
exportconst USERS:User[]= [
18+
{ id:11, name:'Way Lau' },
19+
{ id:12, name:'Narco' },
20+
{ id:13, name:'Bombasto' },
21+
{ id:14, name:'Celeritas' },
22+
{ id:15, name:'Magneta' },
23+
{ id:16, name:'RubberMan' },
24+
{ id:17, name:'Dynama' },
25+
{ id:18, name:'Dr IQ' },
26+
{ id:19, name:'Magma' },
27+
{ id:20, name:'Tornado' }
28+
];
29+
```
30+
31+
32+
##展示用户列表
33+
34+
我们将要在 UsersComponent 的顶部显示这个用户列表。
35+
36+
打开 UsersComponent 类文件 src/app/users/users.component.ts ，并导入模拟的 USERS
37+
38+
```ts
39+
import {USERS }from'../mock-users';
40+
```
41+
42+
往类中添加一个 users 属性，这样可以暴露出这些英雄，以供绑定。
43+
44+
```ts
45+
users=USERS;
46+
```
47+
48+
49+
##使用*ngFor 列出这些用户
50+
51+
*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素。类似于 Java 或者 JavaScript 中的 for-each 循环。
52+
53+
用法如下：
54+
55+
```html
56+
<li*ngFor="let user of users">
57+
```
58+
59+
在这个例子中,
60+
61+
*`<li>` 就是*ngFor 的宿主元素
62+
* users 就是来自 UsersComponent 类的列表。
63+
* 当依次遍历这个列表时，user 会为每个迭代保存当前的用户象。
64+
65+
66+
效果如下：
67+
68+
![](../images/user-list/user-list.jpg)
69+
70+
71+
完整代码如下：
72+
73+
```html
74+
<h2>我的用户</h2>
75+
<ulclass="users">
76+
<li*ngFor="let user of users">
77+
<spanclass="badge">{{user.id}}</span> {{user.name}}
78+
</li>
79+
</ul>
80+
```
81+
82+
83+
##增加样式
84+
85+
目前，展示用户数据是没有问题了。只是不大美化，此时需要CSS来帮忙。
86+
87+
编辑 users.component.css ，添加如下样式：
88+
89+
```css
90+
/* UsersComponent's private CSS styles*/
91+
.selected {
92+
background-color:#CFD8DC!important;
93+
color:white;
94+
}
95+
.users {
96+
margin:002em0;
97+
list-style-type:none;
98+
padding:0;
99+
width:15em;
100+
}
101+
.usersli {
102+
cursor:pointer;
103+
position:relative;
104+
left:0;
105+
background-color:#EEE;
106+
margin:.5em;
107+
padding:.3em0;
108+
height:1.6em;
109+
border-radius:4px;
110+
}
111+
.usersli.selected:hover {
112+
background-color:#BBD8DC!important;
113+
color:white;
114+
}
115+
.usersli:hover {
116+
color:#607D8B;
117+
background-color:#DDD;
118+
left:.1em;
119+
}
120+
.users.text {
121+
position:relative;
122+
top:-3px;
123+
}
124+
.users.badge {
125+
display:inline-block;
126+
font-size:small;
127+
color:white;
128+
padding:0.8em0.7em00.7em;
129+
background-color:#607D8B;
130+
line-height:1em;
131+
position:relative;
132+
left:-1px;
133+
top:-4px;
134+
height:1.8em;
135+
margin-right:.8em;
136+
border-radius:4px004px;
137+
}
138+
```
139+
140+
141+
这些样式，只为 UsersComponent 组件所使用。
142+
143+
144+
145+
效果如下：
146+
147+
![](../images/user-list/style.jpg)
148+
149+
150+
##添加事件
151+
152+
点击用户列表中的某个用户时，该组件应该在页面底部显示所选用户的详情。
153+
154+
155+
添加 click 事件绑定的方式如下：
156+
157+
```html
158+
<li*ngFor="let user of users"(click)="onSelect(user)">
159+
```
160+
161+
click 外面的圆括号会让 Angular 监听这个 <li> 元素的 click 事件。 当用户点击 <li> 时，Angular 就会执行表达式 onSelect(user)。
162+
163+
onSelect() 是 UsersComponent 上的一个方法，接下来就会实现它。 Angular 会把所点击的 <li> 上的 user 对象传给它，这个 user 也就是前面在*ngFor 表达式中定义的那个。
164+
165+
166+
修改 src/app/users/users.component.ts 把该组件的 user 属性改名为 selectedUser ，但不要为它赋值。 因为应用刚刚启动时并没有所选用户。
167+
168+
添加如下 onSelect() 方法，它会把模板中被点击的英雄赋值给组件的 selectedUser 属性。
169+
170+
```ts
171+
selectedUser:User;
172+
173+
onSelect(user:User):void {
174+
this.selectedUser=user;
175+
}
176+
```
177+
178+
179+
同时修改 users.component.html，把 user 更名为 selectedUser：
180+
181+
```html
182+
<h2>{{selectedUser.name}}</h2>
183+
<div><span>id: </span>{{selectedUser.id}}</div>
184+
<div>
185+
<label>name:
186+
<input[(ngModel)]="selectedUser.name"placeholder="name">
187+
</label>
188+
</div>
189+
```
190+
191+
192+
193+
194+
195+
此时如果刷新浏览器，会报如下错误：
196+
197+
```ts
198+
ERRORTypeError:"_co.selectedUser is undefined"
199+
```
200+
201+
错误原因是，模版中 selectedUser 的并未初始化，所以，selectedUser.name中的属性是空的。
202+
203+
所以，我们要加多一个判断，该组件应该只有当 selectedUser 存在时才显示所选用户的详情。
204+
205+
把显示用户详情的 HTML 包裹在一个 <div> 中。 并且为这个 div 添加 Angular 的*ngIf 指令，把它的值设置为 selectedUser 即可。
206+
207+
208+
```html
209+
<div*ngIf="selectedUser">
210+
<h2>{{selectedUser.name}}</h2>
211+
<div><span>id: </span>{{selectedUser.id}}</div>
212+
<div>
213+
<label>name:
214+
<input[(ngModel)]="selectedUser.name"placeholder="name">
215+
</label>
216+
</div>
217+
</div>
218+
```
219+
220+
221+
当 selectedUser 为 undefined 时，ngIf 从 DOM 中移除了用户详情。当选中一个用户时，selectedUser 也就有了值，并且 ngIf 把英雄的详情放回到 DOM 中。
222+
223+
效果如下：
224+
225+
![](../images/user-list/click.jpg)
226+
227+
##选中的样式
228+
229+
目前，很难识别哪些用户是已经选中的。我们需要在选中的用户上添加选中的样式`.selected`。
230+
231+
这个样式已经在 users.component.css 定义了，所以只要实施他即可。我们需要做下判断，如果当前用户是选中的用户，该用户就添加`.selected` 样式，负责就移除`.selected` 样式。
232+
233+
那么如何实现判断呢？
234+
235+
236+
Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。 只要把[class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了。
237+
238+
用法如下：
239+
240+
```html
241+
[class.selected]="user === selectedUser"
242+
```
243+
244+
如果当前行的英雄和 selectedUser 相同，Angular 就会添加 CSS 类 selected，否则就会移除它。
245+
246+
完整代码如下：
247+
248+
```html
249+
<h2>我的用户</h2>
250+
<ulclass="users">
251+
<li*ngFor="let user of users"
252+
[class.selected]="user === selectedUser"
253+
(click)="onSelect(user)">
254+
<spanclass="badge">{{user.id}}</span> {{user.name}}
255+
</li>
256+
</ul>
257+
```
258+
259+
260+
效果如下：
261+
262+
![](../images/user-list/select.jpg)

‎images/user-list/click.jpg‎

30.4 KB
Loading

‎images/user-list/select.jpg‎

31.3 KB
Loading

‎images/user-list/style.jpg‎

27 KB
Loading

‎images/user-list/user-list.jpg‎

26 KB
Loading
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import{User}from'./user';
2+
3+
exportconstUSERS:User[]=[
4+
{id:11,name:'Way Lau'},
5+
{id:12,name:'Narco'},
6+
{id:13,name:'Bombasto'},
7+
{id:14,name:'Celeritas'},
8+
{id:15,name:'Magneta'},
9+
{id:16,name:'RubberMan'},
10+
{id:17,name:'Dynama'},
11+
{id:18,name:'Dr IQ'},
12+
{id:19,name:'Magma'},
13+
{id:20,name:'Tornado'}
14+
];
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* UsersComponent's private CSS styles */
2+
.selected {
3+
background-color:#CFD8DC!important;
4+
color: white;
5+
}
6+
.users {
7+
margin:002em0;
8+
list-style-type: none;
9+
padding:0;
10+
width:15em;
11+
}
12+
.usersli {
13+
cursor: pointer;
14+
position: relative;
15+
left:0;
16+
background-color:#EEE;
17+
margin:.5em;
18+
padding:.3em0;
19+
height:1.6em;
20+
border-radius:4px;
21+
}
22+
.usersli.selected:hover {
23+
background-color:#BBD8DC!important;
24+
color: white;
25+
}
26+
.usersli:hover {
27+
color:#607D8B;
28+
background-color:#DDD;
29+
left:.1em;
30+
}
31+
.users .text {
32+
position: relative;
33+
top:-3px;
34+
}
35+
.users .badge {
36+
display: inline-block;
37+
font-size: small;
38+
color: white;
39+
padding:0.8em0.7em00.7em;
40+
background-color:#607D8B;
41+
line-height:1em;
42+
position: relative;
43+
left:-1px;
44+
top:-4px;
45+
height:1.8em;
46+
margin-right:.8em;
47+
border-radius:4px004px;
48+
}
Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1-
<h2>{{user.name}}</h2>
2-
<div><span>id:</span>{{user.id}}</div>
3-
<div>
4-
<label>name:
5-
<input[(ngModel)]="user.name"placeholder="name">
6-
</label>
7-
</div>
1+
<h2>我的用户</h2>
2+
<ulclass="users">
3+
<li*ngFor="let user of users"
4+
[class.selected]="user === selectedUser"
5+
(click)="onSelect(user)">
6+
<spanclass="badge">{{user.id}}</span> {{user.name}}
7+
</li>
8+
</ul>
9+
10+
11+
<div*ngIf="selectedUser">
12+
<h2>{{selectedUser.name}}</h2>
13+
<div><span>id:</span>{{selectedUser.id}}</div>
14+
<div>
15+
<label>name:
16+
<input[(ngModel)]="selectedUser.name"placeholder="name">
17+
</label>
18+
</div>
19+
</div>

‎samples/user-management/src/app/users/users.component.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import{Component,OnInit}from'@angular/core';
22

33
import{User}from'../user';
4+
import{USERS}from'../mock-users';
45

56
@Component({
67
selector:'app-users',
@@ -9,11 +10,13 @@ import { User } from '../user';
910
})
1011
exportclassUsersComponentimplementsOnInit{
1112

12-
user :User={
13-
id:1,
14-
name:'老卫'
15-
};
13+
selectedUser:User;
14+
15+
onSelect(user:User):void{
16+
this.selectedUser=user;
17+
}
1618

19+
users=USERS;
1720

1821
constructor(){}
1922

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp