Angular 显示英雄列表

在本页面，你将扩展《英雄指南》应用，让它显示一个英雄列表， 并允许用户选择一个英雄，查看该英雄的详细信息。

创建模拟（mock）英雄数据

你需要一些英雄数据以供显示。

最终，你会从远端的数据服务器获取它。但是目前，你需要创建一些模拟英雄（some mock heroes），并假设这些数据是从远程服务器上获取的。

在 src/app/ 文件夹中创建一个名叫 mock-heroes.ts 的文件。 定义一个包含十个英雄的常量数组 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‘ }

];

显示英雄

你要在 HeroesComponent 的顶部显示这个英雄列表。

打开 HeroesComponent 类文件，并导入模拟的 HEROES 数据。

src/app/heroes/heroes.component.ts

import { HEROES } from ‘../mock-heroes‘;

往类中添加一个 heroes 属性，这样可以暴露出这些英雄，以供绑定。

src/app/heroes/heroes.component.ts

export class HeroesComponent implements OnInit {

  heroes = HEROES;

使用 *ngFor 列出这些英雄

打开 HeroesComponent 的模板文件，并做如下修改：

  • 在顶部添加 <h2>
  • 然后添加表示无序列表的 HTML 元素（<ul>）
  • 在 <ul> 中插入一个 <li> 元素，以显示单个 hero 的属性。
  • 点缀上一些 CSS 类（稍后你还会添加更多 CSS 样式）。

完成后应该如下显示：

heroes.component.html

heroes.component.html (heroes template)

content_copy

<h2>My Heroes</h2>

<ul class="heroes">

  <li>

    <span class="badge">{{hero.id}}</span> {{hero.name}}

  </li>

</ul>

现在，把 <li> 修改成这样：

<li *ngFor="let hero of heroes">

*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素。

在这个例子中

  • <li> 就是 *ngFor 的宿主元素
  • heroes 就是来自 HeroesComponent 类的列表。
  • 当依次遍历这个列表时，hero 会为每个迭代保存当前的英雄对象。

不要忘了 ngFor 前面的星号（*），它是该语法中的关键部分。

浏览器刷新之后，英雄列表出现了。

给英雄们应用样式表

英雄列表应该富有吸引力，并且当用户把鼠标移到某个英雄上和从列表中选中某个英雄时，应该给出视觉反馈。

在教程的第一章，你曾在 styles.css 中为整个应用设置了一些基础的样式。 但那个样式表并不包含英雄列表所需的样式。

固然，你可以把更多样式加入到 styles.css，并且放任它随着你添加更多组件而不断膨胀。

但还有更好的方式。你可以定义属于特定组件的私有样式，并且让组件所需的一切（代码、HTML 和 CSS）都放在一起。

这种方式让你在其它地方复用该组件更加容易，并且即使全局样式和这里不一样，组件也仍然具有期望的外观。

你可以用多种方式定义私有样式，或者内联在 @Component.styles 数组中，或者在 @Component.styleUrls 所指出的样式表文件中。

当 CLI 生成 HeroesComponent 时，它也同时为 HeroesComponent 创建了空白的 heroes.component.css 样式表文件，并且让 @Component.styleUrls 指向它，就像这样：

src/app/heroes/heroes.component.ts

@Component({

  selector: ‘app-heroes‘,

  templateUrl: ‘./heroes.component.html‘,

  styleUrls: [‘./heroes.component.css‘]

})

打开 heroes.component.css 文件，并且把 HeroesComponent 的私有 CSS 样式粘贴进去。 你可以在本指南底部的查看最终代码中找到它们。

@Component 元数据中指定的样式和样式表都是局限于该组件的。 heroes.component.css 中的样式只会作用于 HeroesComponent，既不会影响到组件外的 HTML，也不会影响到其它组件中的 HTML。

主从结构

当用户在主列表中点击一个英雄时，该组件应该在页面底部显示所选英雄的详情。

在本节，你将监听英雄条目的点击事件，并更新英雄的详情。

添加 click 事件绑定

再往 <li> 元素上插入一句点击事件的绑定代码：

heroes.component.html

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

这是 Angular 事件绑定 语法的例子。

click 外面的圆括号会让 Angular 监听这个 <li> 元素的 click 事件。 当用户点击 <li> 时，Angular 就会执行表达式 onSelect(hero)。

onSelect() 是 HeroesComponent 上的一个方法，你很快就要写它。 Angular 会把所点击的 <li> 上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。

添加 click 事件处理器

把该组件的 hero 属性改名为 selectedHero，但不要为它赋值。 因为应用刚刚启动时并没有所选英雄。

添加如下 onSelect() 方法，它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。

src/app/heroes/heroes.component.ts

selectedHero: Hero;

onSelect(hero: Hero): void {

  this.selectedHero = hero;

}

修改详情模板

该模板引用的仍然是老的 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>

刷新浏览器，应用挂了。

打开浏览器的开发者工具，它的控制台中显示出如下错误信息：

HeroesComponent.html:3 ERROR TypeError: Cannot read property ‘name‘ of undefined

出现了什么问题？

当应用启动时，selectedHero 是 undefined，设计如此。

但模板中的绑定表达式引用了 selectedHero 的属性（表达式为 {{selectedHero.name}}），这必然会失败，因为你还没选过英雄呢。

现在，从列表中随便点击一个条目。 应用又正常了。 英雄们显示在列表中，并且所点英雄的详情也显示在了页面的下方。

修复 - 使用 *ngIf 来隐藏空白的细节

该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。

把显示英雄详情的 HTML 包裹在一个 <div> 中。 并且为这个 div 添加 Angular 的 *ngIf 指令，把它的值设置为 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>

浏览器刷新之后，英雄名字的列表又出现了。 详情部分仍然是空。 点击一个英雄，它的详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中，当你单击英雄的名字的时候，有关你单击英雄的详细信息就显示在页面的底部了。

为什么这样是正常的

当 selectedHero 为 undefined 时，ngIf 从 DOM 中移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。

当用户选择一个英雄时，selectedHero 也就有了值，并且 ngIf 把英雄的详情放回到 DOM 中。

给所选英雄添加样式

所有的 <li> 元素看起来都是一样的，因此很难从列表中识别出所选英雄。

如果用户点击了“Magneta”，这个英雄应该用一个略有不同的背景色显示出来，就像这样：

所选英雄的颜色来自于你前面添加的样式中的 CSS 类 .selected。 所以你只要在用户点击一个 <li> 时把 .selected 类应用到该元素上就可以了。

Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。 只要把 [class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了。

在 HeroesComponent 模板中的 <li> 元素上添加 [class.selected] 绑定，代码如下：

heroes.component.html (toggle the ‘selected‘ CSS class)

[class.selected]="hero === selectedHero"

如果当前行的英雄和 selectedHero 相同，Angular 就会添加 CSS 类 selected，否则就会移除它。

最终的 <li> 是这样的：

heroes.component.html (list item hero)

<li *ngFor="let hero of heroes"

  [class.selected]="hero === selectedHero"

  (click)="onSelect(hero)">

  <span class="badge">{{hero.id}}</span> {{hero.name}}

</li>

查看最终代码

你的应用现在变成了这样：在线例子 / 下载范例。

下面是本页面中所提及的代码文件，包括 HeroesComponent 的样式。

对应的文件列表和代码链接如下：


文件名
源代码
src/app/heroes/heroes.component.ts https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-list/blob/master/src/app/heroes/heroes.component.ts
src/app/heroes/heroes.component.html https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-list/blob/master/src/app/heroes/heroes.component.html
src/app/heroes/heroes.component.css https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-list/blob/master/src/app/heroes/heroes.component.css

小结

  • 英雄指南应用在一个主从视图中显示了英雄列表。
  • 用户可以选择一个英雄，并查看该英雄的详情。
  • 你使用 *ngFor 显示了一个列表。
  • 你使用 *ngIf 来根据条件包含或排除了一段 HTML。
  • 你可以用 class 绑定来切换 CSS 的样式类。

https://www.cwiki.us/display/AngularZH/Display+a+Heroes+List

原文地址：https://www.cnblogs.com/huyuchengus/p/10947288.html

时间： 2024-08-28 18:20:52

Angular 显示英雄列表的相关文章

我们构建一个主从结构的页面，用于展现英雄列表

延续上一步教程 让应用代码保持转译和运行 我们要启动 TypeScript 编译器,它会监视文件变更,并启动开发服务器.我们只要敲: npm start 这个命令会在我们构建<英雄指南>的时候让应用得以持续运行. 显示我们的英雄 创建英雄 我们先创建一个由十位英雄组成的数组. /app/app.component.ts const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id:

【iOS开发之旅】UITableView示例-LOL英雄列表

UITableView示例-LOL英雄列表运行效果        CZHero.h // // CZHero.h // 04-UITableView示例-加载plist文件 // // Created by ChenQianPing on 16/1/21. // Copyright © 2016年 chenqp. All rights reserved. // #import <Foundation/Foundation.h> @interface CZHero : NSObject // 头

12-27cell 的可重用性（英雄列表应用性能的优化）

在英雄列表中动态生成cell的代码在中, - (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { //    创建一个cell并且设置cell的风格 UITableViewCell *cell  = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseId

Qt中显示复杂列表

提要 最近想要完成的一个项目需要显示一个列表,可以动态增减,可编辑,有checkbox.类似于这样 或者这样 但网上的例子都是这样 和这样 ... 最后实现的效果: QListWidget解决方案 在Android实现这样的列表是非常简单的,首先定义布局XML,然后再定义一个Adapter就可以了. Qt中类似的解决方案就是QListWidget. 自定义一个Widget类作为Item,比如 class UsersListItem : public QWidget { Q_OBJECT publ

Android SDK无法显示更新列表解决方法

解决办法: 第一步: 打开Windows中C:\WINDOWS\system32\drivers\etc\hosts,然后添加以下内容: 203.208.46.146 dl.google.com 203.208.46.146 dl-ssl.google.com 74.125.113.121 developer.android.com 第二步: 打开Android SDK Manager,选上方的菜单Tools,进入Options,在"Force https://- "前面打钩,就可以更

12-26英雄列表

英雄列表小应用的流程 1.通过plist加载模型对象,代码如下: #import <Foundation/Foundation.h> @interface CZHero : NSObject @property (nonatomic,copy) NSString *name ; @property (nonatomic,copy) NSString *intro ; @property (nonatomic,copy) NSString *icon ; -  (instancetype) in

JS DOM编程艺术——显示缩略语列表—— JS学习笔记2015-7-16(第85天)

缩略语列表函数 HTML 结构: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>显示缩略语列表</title> <style> body{ font-family: "Helvetiva", "

用Dialog显示一个列表

要求:用Dialog对话框显示一个列表,并实现其点击效果 代码: private ListView lv_list; private String deleteName; private AlertDialog.Builder builder; private Dialog dialog; private void showDialog() { /**  * 创建Dialog,参数为当前环境与样式.  */ builder = new AlertDialog.Builder(this); Vie

QT使用tableWidget显示双排列表 并且选中用红框圈出来

如需转载请标明出处:http://blog.csdn.net/itas109 整个工程下载地址:http://download.csdn.net/detail/itas109/7607735 这里采用tableWidget显示双排列表 双排列表代码 QTableWidgetItem* item[50]; int Row; if (num%2 == 1) { Row = num/picColumn+1; } else { Row = num/picColumn; } int index;//表格坐