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

页面中显示列表（*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 会为每个迭代保存当前的数据对象。

完成以后的界面如下：

注意：⚠️ *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. }

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

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

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

<li *ngFor="let hero of heroes" (click)="onSelect(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>

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

这里是因为：当启动应用时，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信息。

6.给选中的hero添加样式

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

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

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

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