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

helloworldcoding 发布于2019-08-19 10:59 / 2302人阅读

摘要：初探用户列表与用户详情在上一篇博文进入用户编辑中我们分享了属性名称和这两个表达式的运用我们已经可以将表单里的修改与我们展示出来的值进行同步今天我们来学习在中如何展示一个列表在项目里列表展示可以说是非常普遍的一个需求了几乎有展示数

　　在上一篇博文《Angular6.x---进入用户编辑》中,我们分享了{{属性名称}}和[(ngModel)]这两个表达式的运用,我们已经可以将表单里的修改与我们展示出来的值进行同步,今天我们来学习在Angular6.x中如何展示一个列表.

　　在项目里,列表展示可以说是非常普遍的一个需求了,几乎有展示数据需求的地方都需要一个列表展示与一个详情展示.当然我们的数据一般都是从服务器端获取的,而今天呢,为了节约时间,我这里直接新建一个数组,然后在user.component.ts里引入,并给Users创建一个数组属性,之后直接开始在user.component.html里展示,数组代码如下方左图所示,引入代码如下方右图所示:

　　在Angular6.x中展示一个数组或列表需要用到ngFor,这个有点儿类似于java中的foreach循环.完整的语法是ngFor=”letobjectoflist”,然后他会自动的在我们标记了*ngFor语法的标签上执行循环操作.

　　一般来说,在列表中选中一条数据时,我们往往希望展示出这条数据的详细信息,那么此时就分为两步,首先我们需要给标签绑定一个单击事件,其次我们需要将选中的对象传递给我们需要展示详情信息的那个模块.

　　在上一篇博文中,我们已经知道,{{属性名称}}可以将我们在users.component.ts里定义的属性给显示出来,所以我们想要显示用户的详情,只需要将选中的对象赋值给我们在users.component.ts里定义的那个模型属性里即可.给标签绑定单击事件及传值代码如下图所示,赋值代码如下图2所示,(当然因为属性由user变为了selectUser,所以我们上一次页面中展示的user也要改为selectUser):

　　图1

　　图2

　　此时,如果我们直接启动,会发现程序没有按照预期的进行显示,打开web开发者工具,我们会发现控制台有打印错误信息:”_co.selectUserisundefined”.如下图所示:

　　这是因为我们首次加载的时候,并没有选中用户,所以我们在详情里绑定的selectUser也就成为了未定义的对象.为了避免这个错误,我们要对其进行判断,如果用户存在,则显示,如果不存在,则不显示,Angular也考虑到了这种需求,于是提供了*ngIf这个关键词,我们正好可以使用这个关键词.代码如图所示

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

私有云云服务器用户列表 Windows用户列表 linux用户列表当前在线用户列表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/76789.html

初探Angular6.x---主从组件

摘要：在上一篇博文用户列表与详情展示中我们用实现了用户列表的展示并通过语法实现了列表单击时将单击的对象传到后台的功能最后为了防止初次加载对象为空导致的错误我们又使用了语法来对要展示的详情对象进行判空操作但随着后续模块的增多以及业务的交叉我们　　　在上一篇博文《Angular6.x---用户列表与详情展示》中,我们用ngFor=let object of list实现了用户列表的展示,并通过...

FingerLiu 2019-08-19 11:06 评论0 收藏0
Django搭建个人博客：View视图初探

摘要：比如，在一个博客应用中，你可能会创建如下几个视图博客首页展示最近的几项内容。这些需求都靠视图来完成。首先写一个最简单的视图函数，在浏览器中打印出字符串。调用函数时会返回一个含字符串的对象。换句话说，的作用是将映射到视图中。 Django 中的视图的概念是「一类具有相同功能和模板的网页的集合」。比如，在一个博客应用中，你可能会创建如下几个视图：博客首页：展示最近的几项内容。内容详情...

Turbo 2019-07-30 17:51 评论0 收藏0
前后端完全分离之 API 设计

摘要：删除后指定产品不存在获取商品列表未分页获取全部商品成功系列的表壳材料为轻巧的银色及深空灰色阳极氧化铝金属，强化玻璃材质为显示屏提供保护。外观设计不再棱角分明，表层玻璃边有一个弧度向下延伸，与阳极氧化铝金属机身边框衔接。背景 API 就是开发者使用的界面。我的目标不仅是能用，而且好用，跨平台（PC, Android, IOS, etc...）使用。本文将详细介绍 API 的设计及异常处...

gitmilk 2019-08-21 10:30 评论0 收藏0
前后端完全分离之 API 设计

摘要：删除后指定产品不存在获取商品列表未分页获取全部商品成功系列的表壳材料为轻巧的银色及深空灰色阳极氧化铝金属，强化玻璃材质为显示屏提供保护。外观设计不再棱角分明，表层玻璃边有一个弧度向下延伸，与阳极氧化铝金属机身边框衔接。背景 API 就是开发者使用的界面。我的目标不仅是能用，而且好用，跨平台（PC, Android, IOS, etc...）使用。本文将详细介绍 API 的设计及异常处...

gaara 2019-08-14 12:10 评论0 收藏0
angular(angular6/angular7/angular8) delete请求body的问

摘要：中请求，不接受，只需将其放在对象中即可在，，及以上版本中修改如下在中修改如下这样请求就可以携带 angular中httpclient delete请求，不接受body，只需将其放在options对象中即可在 angular6.x ，angular7.x， angular8.x及以上版本中修改如下: const options = { headers: new HttpHeader...

gggggggbong 2019-08-26 10:49 评论0 收藏0