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

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

　　在上一篇博文《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这个关键词,咱们正好可使用这个关键词.代码如图所示

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