Angular学习笔记6: 在页面中显示列表（ngFor/ngIf）

布满荆棘的人生 2022-05-09 03:48 183阅读 0赞

# 页面中显示列表（\*ngFor/\*ngIf指令的使用） #

继学习笔记5以后，可以将一个Object对象显示在模版文件中(html)

真正在项目中，数据是来自后端服务器返回的，此时先创建一些模拟的数据。

## 1.创建模拟的数据 ##

在 `src/app/` 文件夹中创建一个名叫 `mock-heroes.ts` 的文件。

1.  `wjydeMacBook-Pro:app wjy$ ng generate class mock-heroes`
2.  `CREATE src/app/mock-heroes.ts (28 bytes)`
3.

定义一个包含十个Hero(Hero类型)的常量数组 `HEROES`，并导出它。

1.  `import {Hero} from './hero';`
2.   
3.   
4.  `export const HEROES: Hero[] = [`
5.  `{id: 11, name: 'Mr. Nice'},`
6.  `{id: 12, name: 'Narco'},`
7.  `{id: 13, name: 'Bombasto'},`
8.  `{id: 14, name: 'Celeritas'},`
9.  `{id: 15, name: 'Magneta'},`
10. `{id: 16, name: 'RubberMan'},`
11. `{id: 17, name: 'Dynama'},`
12. `{id: 18, name: 'Dr IQ'},`
13. `{id: 19, name: 'Magma'},`
14. `{id: 20, name: 'Tornado'}`
15. `];`
16.  
17. `export class MockHeroes {`
18.  
19. `}`

## 2.显示创建的数据 ##

在HeroesComponent页面上显示这些数据，

*  先在HeroesComponent类文件中导入在`mock-heroes.ts` 的HEROES，

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

*  在HeroesComponent类文件中添加一个属性：heroes，使其等于导入的HEROES数组，这样可以在HeroesComponent类文件中使用HEROES数组

heroes = HEROES;

## 3.使用\*ngFor将这些数据依次展示出来 ##

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

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

1.  `<h2>My Heroes</h2>`
2.  `<ul class="heroes">`
3.  `<li *ngFor="let hero of heroes">`
4.  `<span class="badge">{ {hero.id}}</span> { {hero.name}}`
5.  `</li>`
6.  `</ul>`

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

在这个例子中

*  `<li>` 就是 `*ngFor` 的宿主元素（会将<li>标签中包含的所有元素全部遍历）。
 *  `heroes` 就是来自 `HeroesComponent` 类的列表。
 *  当依次遍历`heroes`这个列表时，`hero` 会为每个迭代保存当前的数据对象。

完成以后的界面如下：

![70][]

**注意：⚠️ \*ngFor的   \*  不能丢掉**

## 4.为HeroesComponent添加私有样式 ##

在此之前，在 `styles.css` 中为整个应用设置了一些基础的样式，但是那些并不适用于现在这个列表，所以，要为这些列表写自己的私有的样式。

定义私有样式的方式：

*  内联在 `@Component.styles` 数组中

1.  `import {Component, OnInit} from '@angular/core';`
2.  `import {Hero} from '../hero';`
3.  `import {HEROES} from '../mock-heroes';`
4.   
5.  `@Component({`
6.  `selector: 'app-heroes',`
7.  `templateUrl: './heroes.component.html',`
8.  `styles: ['li{background-color: aliceblue}']`
9.  `})`
10. `export class HeroesComponent implements OnInit {`
11. `hero: Hero = {`
12. `id: 1,`
13. `name: 'Windstorm',`
14. `};`
15. `heroes = HEROES;`
16.  
17. `constructor() {`
18. `}`
19.  
20. `ngOnInit() {`
21. `}`
22.  
23. `}`

*  或者在 `@Component.styleUrls` 所指出的样式表文件中。

1.  `import {Component, OnInit} from '@angular/core';`
2.  `import {Hero} from '../hero';`
3.  `import {HEROES} from '../mock-heroes';`
4.   
5.  `@Component({`
6.  `selector: 'app-heroes',`
7.  `templateUrl: './heroes.component.html',`
8.  `styleUrls: ['./heroes.component.css']`
9.  `})`
10. `export class HeroesComponent implements OnInit {`
11. `hero: Hero = {`
12. `id: 1,`
13. `name: 'Windstorm',`
14. `};`
15. `heroes = HEROES;`
16.  
17. `constructor() {`
18. `}`
19.  
20. `ngOnInit() {`
21. `}`
22.  
23. `}`

在这里，才用第二种方式去添加样式，打开heroes.component.css文件中添加一下样式：

1.  `.selected {`
2.  `background-color: #CFD8DC !important;`
3.  `color: white;`
4.  `}`
5.  `.heroes {`
6.  `margin: 0 0 2em 0;`
7.  `list-style-type: none;`
8.  `padding: 0;`
9.  `width: 15em;`
10. `}`
11. `.heroes li {`
12. `cursor: pointer;`
13. `position: relative;`
14. `left: 0;`
15. `background-color: #EEE;`
16. `margin: .5em;`
17. `padding: .3em 0;`
18. `height: 1.6em;`
19. `border-radius: 4px;`
20. `}`
21. `.heroes li.selected:hover {`
22. `background-color: #BBD8DC !important;`
23. `color: white;`
24. `}`
25. `.heroes li:hover {`
26. `color: #607D8B;`
27. `background-color: #DDD;`
28. `left: .1em;`
29. `}`
30. `.heroes .text {`
31. `position: relative;`
32. `top: -3px;`
33. `}`
34. `.heroes .badge {`
35. `display: inline-block;`
36. `font-size: small;`
37. `color: white;`
38. `padding: 0.8em 0.7em 0 0.7em;`
39. `background-color: #607D8B;`
40. `line-height: 1em;`
41. `position: relative;`
42. `left: -1px;`
43. `top: -4px;`
44. `height: 1.8em;`
45. `margin-right: .8em;`
46. `border-radius: 4px 0 0 4px;`
47. `}`

刷新浏览器，看到如下界面：

![70 1][]

## 5.使用户在**主**列表中点击一个hero时，该组件应该在页面底部显示所选hero的**详情** ##

*  用户点击，就要添加一个点击事件

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

*  添加 `click` 事件处理器

添加一个selectedHero标示被选中的hero，在onSelect方法中，将选中的那个hero赋值给selectHero。

1.  `selectedHero: Hero;`
2.   
3.  `onSelect(hero: Hero): void {`
4.  `this.selectedHero = hero;`
5.  `}`

*  修改模版

1.  `<h2>My Heroes</h2>`
2.  `<ul class="heroes">`
3.  `<li *ngFor="let hero of heroes" (click)="onSelect(hero)">`
4.  `<span class="badge">{ {hero.id}}</span> { {hero.name}}`
5.  `</li>`
6.  `</ul>`
7.   
8.  `<h2>{ {selectedHero.name}} Details</h2>`
9.  `<div><span>id: </span>{ {selectedHero.id}}</div>`
10. `<div>`
11. `<label>name:`
12. `<input [(ngModel)]="selectedHero.name" placeholder="name">`
13. `</label>`
14. `</div>`

保存刷新浏览器，不正常显示了，打开控制台发现保错：

![70 2][]

这里是因为：当启动应用时，selectedHero这个属性还没有初始化，此时的selectedHero=undefined，此时就用\*ngIf 当selectedHero===undefined时，让这段隐藏，在selectedHero！==undefined时，在显示出来。用一个<div></div>将其包起来。

**注意：⚠️ \*ngIf的   \*  不能丢掉**

具体如下：

1.  `<div *ngIf="selectedHero">`
2.  `<h2>{ {selectedHero.name}} Details</h2>`
3.  `<div><span>id: </span>{ {selectedHero.id}}</div>`
4.  `<div>`
5.  `<label>name:`
6.  `<input [(ngModel)]="selectedHero.name" placeholder="name">`
7.  `</label>`
8.  `</div>`
9.  `</div>`

此时再次保存，浏览区刷新就不会报错。界面显示正常。当点击hero列表的时候，才会出现具体的hero信息。

![70 3][]

## 6.给选中的hero添加样式 ##

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

在 `HeroesComponent` 模板中的 `<li>` 元素上添加 `[class.selected]` 绑定，即：

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

在这里添加了，样式的判断条件，只有爱hero和selectHero两者相等的时候，这个样式才成立。即：

![70 4][]

[70]: /images/20220509/6c0d6384e54242ae9d112ce1a4ca5bd3.png
[70 1]: /images/20220509/708e8186885c421185e5320697555f16.png
[70 2]: /images/20220509/e136e2073ea2473cbb7f35196eb00232.png
[70 3]: /images/20220509/c6b3f04ac0804e8db8e2a7b3ca1f3e1c.png
[70 4]: /images/20220509/f0857635e4dc4f82a0cb32c99186b35e.png