Angular2.x-显示heroes列表
在此页面中,您将展开Tour of Heroes应用程序以显示heroes列表,并允许用户选择heroes并显示heroes的详细信息。
6.X
你需要一些heroes来展示。
最终你会从远程数据服务器获取它们。现在,你会创建一些模拟heroes,并假装他们来自服务器。
创建一个文件夹中调用mock-heroes.ts
的src/app/
文件。定义一个HEROES
由十个heroes组成的数组并将其导出。该文件应该看起来像这样。
//src/app/mock-heroes.ts import { Hero } from './hero';export const HEROES: Hero[] = [{ id: 11, name: 'Mr. Nice' },{ id: 12, name: 'Narco' },{ id: 13, name: 'Bombasto' },{ id: 14, name: 'Celeritas' },{ id: 15, name: 'Magneta' },{ id: 16, name: 'RubberMan' },{ id: 17, name: 'Dynama' },{ id: 18, name: 'Dr IQ' },{ id: 19, name: 'Magma' },{ id: 20, name: 'Tornado' } ];
View Code
6.1-显示hereos
您即将在顶部显示heroes列表HeroesComponent
。
打开HeroesComponent
类文件并导入模拟HEROES
。
src/app/heroes/heroes.component.ts import { HEROES } from '../mock-heroes';
import { Component, OnInit } from '@angular/core'; import { HEROES } from '../mock-heroes'; import { Hero } from '../hero';@Component({selector: 'app-heroes',templateUrl: './heroes.component.html',styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit {hero: Hero = {id: 1,name: 'Windstorm'};heroes = HEROES;constructor() { }ngOnInit() {}}
View Code
6.2-用 * ngFor列出heroes
打开HeroesComponent
模板文件并进行以下更改:
<h2>
在顶部添加一个,- 在它下面添加一个HTML无序列表(
<ul>
) - 插入一个
<li>
内<ul>
显示的属性hero
。 - 为样式添加一些CSS类(您将很快添加CSS样式)。
让它看起来像这样:
<h2>My Heroes</h2> <ul class="heroes"><li><span class="badge">{{hero.id}}</span> {{hero.name}}</li> </ul>
View Code
现在改变<li>
为
<li *ngFor="let hero of heroes">
源码:
<h2>My Heroes</h2> <ul class="heroes"><li *ngFor="let hero of heroes"><span class="badge">{{hero.id}}</span> {{hero.name}}</li> </ul>
这*ngFor
是Angular的repeater指令。它重复列表中每个元素的主机元素。
在这个例子中
<li>
是主机元素heroes
是HeroesComponent
班上的名单。hero
通过列表保存每次迭代的当前heroes对象。
不要忘记前面的星号(*)ngFor
。这是语法的关键部分。
7.X-heroes的style
heroes名单应该是有吸引力的,并且当用户将鼠标悬停在列表中并从中选择heroes时,应该以可视方式作出响应。
在第一篇教程中,您将为整个应用程序设置基本样式styles.css
。该样式表不包含这个heroes列表的样式。
styles.css
在添加组件时,您可以添加更多样式并继续增加样式表。
您可能更倾向于为特定组件定义私有样式,并将组件需要的所有内容(代码,HTML和CSS)保存在一个地方。
这种方法使得在其他地方重新使用组件更容易,并且即使全局样式不同,也可以提供组件的预期外观。
您可以在数组中内联定义私有样式,也可以将其定义为阵列中标识的样式表文件。@Component.styles
@Component.styleUrls
当CLI生成时HeroesComponent
,它heroes.component.css
为此创建了一个空的样式表,HeroesComponent
并像这样指向它。@Component.styleUrls
// src / app / heroes / heroes.component.ts(@Component) @Component({selector: 'app-heroes',templateUrl: './heroes.component.html',styleUrls: ['./heroes.component.css'] })
打开该heroes.component.css
文件并粘贴私人CSS样式HeroesComponent
。您可以在本指南底部的最终代码审查中找到它们。
元数据中标识的样式和样式表被限定为特定组件。这些样式仅适用于和不影响任何其他组件中的外部HTML或HTML。
@Component
heroes.component.css
HeroesComponent
8.X
当用户点击主列表中的heroes时,该组件应该在页面底部显示所选heroes的详细信息。
在本节中,您将听取heroes项目点击事件并更新heroes细节。
8.1-添加一个点击事件绑定
添加一个点击事件绑定到<li>
这样的:
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
这是Angular的事件绑定语法的一个例子。
周围的圆括号click
告诉Angular倾听<li>
元素的 click
事件。当用户点击时<li>
,Angular执行onSelect(hero)
表达式。
onSelect()
是HeroesComponent
你即将写的一种方法。Angular用hero
点击显示的对象进行调用,与之前在表达式中定义<li>
的相同。hero
*ngFor
8.2-添加单击事件处理程序
重命名组件的hero
属性,selectedHero
但不分配它。应用程序启动时没有选定的heroes。
添加以下onSelect()
方法,该方法将模板中单击的heroes分配给组件selectedHero
。
// src / app / heroes / heroes.component.ts(onSelect) selectedHero: Hero;onSelect(hero: Hero): void {this.selectedHero = hero; }
8.3-更新详细信息模板
模板仍然引用hero
不再存在的组件的旧属性。重命名hero
为selectedHero
。
//heroes.component.html<h2>{{ selectedHero.name | uppercase }} Details</h2> <div><span>id: </span>{{selectedHero.id}}</div> <div><label>name:<input [(ngModel)]="selectedHero.name" placeholder="name"></label> </div>
8.4-使用 * ngIf隐藏空白详细信息
浏览器刷新后,应用程序被破坏。
打开浏览器开发人员工具,然后在控制台中查找像这样的错误消息:
现在点击其中一个列表项。该应用程序似乎再次工作。heroes出现在列表中,并且关于被点击的heroes的详细信息出现在页面的底部。
发生了什么?
当应用程序启动时,这selectedHero
是undefined
设计。
在模板中引用selectedHero
像{{selectedHero.name}}
- 这样的表达式的属性的绑定表达式必须失败,因为没有选定的heroes。
修复
如果selectedHero
存在,组件应该只显示选定的heroes细节。
将heroes细节HTML包装在一个<div>
。将Angular的指令添加到并设置为。*ngIf
<div>
selectedHero
不要忘记前面的星号(*)ngIf
。这是语法的关键部分。
src / app / heroes / heroes.component.html(* ngIf)
<div *ngIf="selectedHero"><h2>{{ selectedHero.name | uppercase }} Details</h2><div><span>id: </span>{{selectedHero.id}}</div><div><label>name:<input [(ngModel)]="selectedHero.name" placeholder="name"></label></div></div>
浏览器刷新后,名称列表重新出现。详细信息区域为空白。点击一个heroes并显示其详细信息。
为什么它的作品
何时selectedHero
未定义,ngIf
从DOM中删除heroes细节。没有selectedHero
绑定担心。
当用户选择heroes时,selectedHero
有一个值 ngIf
并将heroes详细信息放入DOM中。
8.5-样式选择的heroes
当所有元素看起来相似时,很难在列表中识别选定的heroes<li>
。
如果用户点击“Magneta”,那么这个heroes应该用一个独特但微妙的背景颜色渲染,如下所示:
这个选定的heroes着色是你在前面添加.selected
的样式中的CSS类的工作。您只需将该.selected
类应用到<li>
用户点击该类时。
Angular 类的绑定可以很容易地有条件地添加和删除一个CSS类。只需添加[class.some-css-class]="some-condition"
到你想要的样式。
下面添加[class.selected]
绑定到<li>
的HeroesComponent
模板:
heroes.component.html(切换'所选'CSS类)
[class.selected]="hero === selectedHero"
当前行的heroes是相同的selectedHero
,Angular添加了selected
CSS类。当两位heroes不一样时,Angular会删除这个班级。
完成<li>
看起来像这样:
<li *ngFor="let hero of heroes"[class.selected]="hero === selectedHero"(click)="onSelect(hero)"><span class="badge">{{hero.id}}</span> {{hero.name}} </li>
最终源码:
//heroes.component.ts<h2>My Heroes</h2> <ul class="heroes"><li *ngFor="let hero of heroes" //选择所选类[class.selected]="hero === selectedHero" //添加单击事件(click)="onSelect(hero)"><span class="badge">{{hero.id}}</span> {{hero.name}}</li> </ul><div *ngIf="selectedHero"><h2>{{ selectedHero.name | uppercase }} Details</h2><div><span>id: </span>{{selectedHero.id}}</div><div><label>name:<input [(ngModel)]="selectedHero.name" placeholder="name"></label></div></div>
/* HeroesComponent's private CSS styles */ .selected {background-color: #CFD8DC !important;color: white; } .heroes {margin: 0 0 2em 0;list-style-type: none;padding: 0;width: 15em; } .heroes li {cursor: pointer;position: relative;left: 0;background-color: #EEE;margin: .5em;padding: .3em 0;height: 1.6em;border-radius: 4px; } .heroes li.selected:hover {background-color: #BBD8DC !important;color: white; } .heroes li:hover {color: #607D8B;background-color: #DDD;left: .1em; } .heroes .text {position: relative;top: -3px; } .heroes .badge {display: inline-block;font-size: small;color: white;padding: 0.8em 0.7em 0 0.7em;background-color: #607D8B;line-height: 1em;position: relative;left: -1px;top: -4px;height: 1.8em;margin-right: .8em;border-radius: 4px 0 0 4px; }
//heroes.component.ts import { Component, OnInit } from '@angular/core'; import { Hero } from '../hero'; import { HEROES } from '../mock-heroes';@Component({selector: 'app-heroes',templateUrl: './heroes.component.html',styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit {heroes = HEROES;selectedHero: Hero;constructor() { }ngOnInit() {}onSelect(hero: Hero): void {this.selectedHero = hero;} }
转载于:https://www.cnblogs.com/cisum/p/8526725.html
Angular2.x-显示heroes列表相关推荐
- finalshell文件列表不显示_Jira面板配置_待办事项不显示问题列表
最近,使用jira进行项目管理,出现一些问题,对于其中一些配置,做下记录,后续方便查看,也给需要的人一个参考,传送门: jira使用文档_Java_pang787559613的博客-CSDN博客bl ...
- Android Spinner值不显示,选择列表正常
Android Spinner值不显示,选择列表正常 本Markdown编辑器使用[StackEdit][6]修改而来,用它写博客,将会带来全新的体验哦: 1.项目开发过程中,只有小米的手机出现这个问 ...
- linux 历史命令列表,fc – 显示历史列表中的命令或修改指定的历史命令并执行。 - Linux 命令大全...
显示历史列表中的命令或修改指定的历史命令并执行. 概要 fc [-e ename] [-lnr] [first] [last] fc -s [pat=rep] [command] 主要用途 显示历史列 ...
- Java黑皮书课后题第7章:**7.19(是否排好序了?)编写以下方法,如果参数中的list数组已经排好序了则返回true。编写一个测试程序,提示用户输入一个列表,显示该列表是否已经排好序
7.19(是否排好序了?)编写以下方法,如果参数中的list数组已经排好序了则返回true.编写一个测试程序,提示用户输入一个列表,显示该列表是否已经排好序 题目 题目描述 破题 代码 题目 题目描述 ...
- laravel大型项目系列教程(四)之显示文章列表和用户修改文章
小编心语:不知不觉已经第四部分了,非常感谢很多人给小编提的意见,改了很多bug,希望以后能继续帮小编找找茬~小编也不希望误导大家~这一节,主要讲的是如何显示文章列表和让用户修改文章,小编预告一下(一共 ...
- 客户端出错:无法在数据表视图中显示该列表: 没有安装与 Windows SharePoint Services 兼容的数据表组件...
P:客户端想在数据表中编辑时提示下列错误: 数据视图由于下列一个或多个原因,无法在数据表视图中显示该列表: 没有安装与 Windows SharePoint Services 兼容的数据表组件,浏览器 ...
- c#winform演练 ktv项目 在dataGridView中显示歌曲列表
c#winform演练 ktv项目 在dataGridView中显示歌曲列表 dgv控件绑定泛型数组 dgv对象.DataSource = 数据源 关于数据源,它可以是: 数据集中的某个表 泛型对象数 ...
- 列表视图案例2——显示用户列表
列表视图案例2--显示用户列表 一.运行效果 二.实现步骤
- springboot分页展示功能_基于SpringBoot从零构建博客网站 - 分页显示文章列表功能...
显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...
最新文章
- VS.net 2005 试用(1)
- Jmeter常见问题(转)
- 字节 字符 utf-8 unicode 以及提交表单验证字符长度 .......
- asp.net core 集成JWT
- 多选框实现全选_Angular1.x-checkbox-全选amp;单选amp;多选
- Python大佬利用新接口抓取微信公众号的所有文章
- 整理了一个带语法高亮显示,及到处html功能的richtextbox控件
- supervisor+gunicorn部署python web项目
- 程序员为什么需要框架?
- 记录一下----关于设计模式和面向对象设计原则
- 软件众包,哪个数据库好
- 安装SQL Server2012
- 搭建Mybatis源码环境
- 从零开始学习使用FPGA控制ADF4351芯片
- 华为服务器虚拟kvm退出全屏,kvm虚拟机全屏快捷键
- 夜曲编程python_夜曲编程免费PC版-夜曲编程电脑版下载 v1.0.0--PC6电脑版
- 逆天了!全地形、四舵轮、八连杆、独立悬挂的机器人运动结构方案,来了!
- 使用Javascript实现Dropdownlist级联操作中遇到的两个错误
- 计算机中的正数,负数到底是什么?
- python socket清空接收缓冲区_Python网络编程——修改套接字发送和接收的缓冲区大小...
热门文章
- 今年春节能否告别单身
- 计算机中十进制转二进制逻辑原理,.计算机中为什么要采用二进制?及二进制的基本运算规则,还有.二进制数据与十进制、八进制、十六进制数据之间的转换方法?...
- 我和java这两年--青石桥
- 新年感恩,35G海量资源共享!(Maze系统不稳,暂停共享,见谅)
- 七年级计算机网络基础课件,七年级信息技术 第3章计算机网络基础课件 青岛版.ppt...
- c语言家庭财务管理算法,做好家庭财务管理,离不开这六款工具!
- 计算机在线应用不能安装,电脑如何禁止安装软件,教你win10电脑禁止安装软件的设置教程...
- 基于树莓派的智能家居项目整理
- uboot 修改linux密码,Linux下设置u-boot环境变量----fw_setenv
- 网络基础 之SSL协议