下载掌阅APP，畅读海量书库
立即打开
本节将展示用户列表。当选中某个用户时，能够查看到该用户的详细信息。
由于目前我们的应用都是纯粹的客户端程序，并没有涉及数据的存储及接口的访问，所以，我们只能模拟（Mock）一些用户列表数据。
在src/app/文件夹中创建一个名为“mock-users.ts”的文件。在该文件中定义一个包含10个用户的常量数组 USERS，并导出它。该文件代码如下。
代码 4-9 app/mock-users.ts
我们将要在UsersComponent组件类的顶部显示这个用户列表。
打开UsersComponent组件类文件src/app/users/users.component.ts，并导入模拟的常量数组USERS。
向类中添加一个 users 属性，这样就可以暴露出这些用户，以供后续绑定。
*ngFor是Angular的一个复写器（Repeater）指令，它会为列表中的每项数据复写它的宿主元素，类似于Java或JavaScript中的for-each循环。
*ngFor的用法如下：
在这个例子中，
● ＜li＞是*ngFor的宿主元素。
● users是来自UsersComponent组件类的列表。
● 当依次遍历这个列表时，user会为每个迭代保存当前的用户对象。
效果如图4-9所示。
图4-9 运行效果
完整代码如下。
代码 4-10 app/users.component.html
目前，展示用户列表是没有问题了，只是不大美观，此时需要CSS来帮忙。
编辑users.component.css文件，添加如下样式。
代码 4-11 app/users/users.component.css
这些样式只提供给UsersComponent组件使用。
效果如图4-10所示。
图4-10 运行效果
当单击用户列表中的某个用户时，UsersComponent组件应该在页面底部显示所选用户的详情。
添加click事件绑定的方式如下：
click外面的圆括号会让Angular监听这个<li>标签的click事件。当用户单击<li>标签时，Angular 就会执行表达式onSelect(user)。
onSelect()是UsersComponent组件类中的一个方法，接下来就会实现它。Angular会把所单击的<li>标签上的user对象传给它，这个user也就是前面在*ngFor表达式中定义的那个。
修改src/app/users/users.component.ts文件，把该组件的user属性改名为“selectedUser”，但不要为它赋值，因为在应用刚刚启动时并没有所选用户。
添加如下onSelect()方法，它会把模板中被单击的用户赋值给组件的selectedUser属性。
同时修改users.component.html文件，把user更名为“selectedUser”。
此时如果刷新浏览器，则会报如下错误。
错误原因是，模板中的selectedUser并未初始化，所以selectedUser.name中的属性是空的。
所以，我们要添加一个判断，该组件应该只有当selectedUser存在时才显示所选用户的详情。
把显示用户详情的HTML包裹在一个<div>标签中，并且为这个<div>标签添加Angular的*ngIf指令，把它的值设置为selectedUser即可。
代码 4-12 app/users/users.component.html
当selectedUser为undefined时，*ngIf从DOM中移除了用户的详情。当选中一个用户时，selectedUser也就有了值，并且*ngIf 把用户的详情放回DOM中。
效果如图4-11所示。
图4-11 运行效果
目前，很难识别哪些用户是已经被选中的。我们需要在被选中的用户上添加选中的样式.selected。
因为这个样式已经在users.component.css文件中定义了，所以只要实施它即可。我们需要做一下判断，如果当前用户是被选中的用户，该用户就添加.selected样式；否则就移除.selected样式。
那么，如何实现判断呢?
Angular的CSS类绑定机制让根据条件添加或移除一个CSS类变得很容易——只要把 [class.some-css-class]="some-condition" 添加到要施加样式的元素上即可。
用法如下：
如果当前行的用户和selectedUser相同，Angular就会添加CSS类selected；否则就会移除它。
完整代码如下。
代码 4-13 app/users/users.component.html
效果如图4-12所示。
图4-12 运行效果