初探Angular6.x---用户列表与用户详情

谁践踏了优雅 2022-05-08 16:38 167阅读 0赞

在上一篇博文《Angular6.x---进入用户编辑》中,我们分享了\{ \{属性名称\}\}和\[(ngModel)\]这两个表达式的运用,我们已经可以将表单里的修改与我们展示出来的值进行同步,今天我们来学习在Angular6.x中如何展示一个列表.  
在项目里,列表展示可以说是非常普遍的一个需求了,几乎有展示数据需求的地方都需要一个列表展示与一个详情展示.当然我们的数据一般都是从服务器端获取的,而今天呢,为了节约时间,我这里直接新建一个数组,然后在user.component.ts里引入,并给Users创建一个数组属性,之后直接开始在user.component.html里展示,数组代码如下方左图所示,引入代码如下方右图所示:  
![初探Angular6.x---用户列表与用户详情][Angular6.x---]![初探Angular6.x---用户列表与用户详情][Angular6.x--- 1]  
在Angular6.x中展示一个数组或列表需要用到*ngFor,这个有点儿类似于java中的foreach循环.完整的语法是*ngFor=”let object of list” ,然后他会自动的在我们标记了\*ngFor语法的标签上执行循环操作.  
![初探Angular6.x---用户列表与用户详情][Angular6.x--- 2]  
一般来说,在列表中选中一条数据时,我们往往希望展示出这条数据的详细信息,那么此时就分为两步,首先我们需要给标签绑定一个单击事件,其次我们需要将选中的对象传递给我们需要展示详情信息的那个模块.  
在上一篇博文中,我们已经知道,\{ \{属性名称\}\}可以将我们在users.component.ts里定义的属性给显示出来,所以我们想要显示用户的详情,只需要将选中的对象赋值给我们在users.component.ts里定义的那个模型属性里即可.给标签绑定单击事件及传值代码如下图所示,赋值代码如下图2所示,(当然因为属性由user变为了selectUser,所以我们上一次页面中展示的user也要改为selectUser):  
![初探Angular6.x---用户列表与用户详情][Angular6.x--- 3]  
图1

![初探Angular6.x---用户列表与用户详情][Angular6.x--- 4]  
图2  
此时,如果我们直接启动,会发现程序没有按照预期的进行显示,打开web开发者工具,我们会发现控制台有打印错误信息:”\_co.selectUser is undefined”.如下图所示:  
![初探Angular6.x---用户列表与用户详情][Angular6.x--- 5]  
这是因为我们首次加载的时候,并没有选中用户,所以我们在详情里绑定的selectUser也就成为了未定义的对象.为了避免这个错误,我们要对其进行判断,如果用户存在,则显示,如果不存在,则不显示,Angular也考虑到了这种需求,于是提供了\*ngIf这个关键词,我们正好可以使用这个关键词.代码如图所示![初探Angular6.x---用户列表与用户详情][Angular6.x--- 6]

今天的博文就以修改后的效果图结束,第一次加载,如左图所示,选中某一个用户后的效果如右图所示:

![初探Angular6.x---用户列表与用户详情][Angular6.x--- 7]![初探Angular6.x---用户列表与用户详情][Angular6.x--- 8]

[Angular6.x---]: http://i2.51cto.com/images/blog/201808/20/9fe443bd83b9a720f4754fa204704575.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Angular6.x--- 1]: /images/20220506/96720a8ea2bd4e4e85074c210ae337af.png
[Angular6.x--- 2]: /images/20220506/c5bbcda41adc4b71b56f9792b5678dd6.png
[Angular6.x--- 3]: /images/20220506/13c4d7369f5a42b6a37872a82f738d2f.png
[Angular6.x--- 4]: /images/20220506/7d59a169ae944a2883b8b1c13e8172c0.png
[Angular6.x--- 5]: /images/20220506/cdf4ef7f0a164fbe82f52fba6fe1bd6d.png
[Angular6.x--- 6]: /images/20220506/0908d58e196c4c96845107457ee6e123.png
[Angular6.x--- 7]: http://i2.51cto.com/images/blog/201808/20/930b5f750e0c71c78542a10ae5d61c66.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Angular6.x--- 8]: /images/20220506/4f2dce73e48c41adbe9284ead3a903da.png