Angular学习3-数组的绑定，点击显示数组成员

1.创建一个数组数据，这个是模拟数据的。
在app.component.ts文件中，申明一个数组并赋值：

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' }
];

2.上面创建的数组，无法在html中进行绑定，因此，需要将它放入AppComponent类中以便暴露出来。

export class AppComponent {
  title = 'hello world';
  heroes = HEROES;
}

3.将数组在网页中显示出来，那么需要修改模板为：

template: `
  
My Heroes
  

  

    {{hero.id}} {{hero.name}}
  
  
  `

ngFor的*前缀表示

及其子元素组成了一个显示模板。

ngFor指令在AppComponent.heroes属性返回的heroes数组上迭代，并输出此模板的实例。

引号中赋值给ngFor的那段文本表示“从heroes数组中取出每个英雄，存入一个局部的hero变量，并让它在相应的模板实例中可用”。

其实，相当于做出了数组个数的li出来，然后每个li都可以单独设置。
其实，这个时候直接看显示也能看出来，就是很多li并且还带些ul的小圆点。

4.给list添加样式：
这个是在
···
@Component({
selector: 'app-root',
template:

My Heroes

• {{hero.id}} {{hero.name}}

,
styles: [//**注意名称为styles，是个数组，数组中的元素是字符串，目前是一个字符串，表示了所有的样式，上面的模板，注意是有class的** .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; }]
})
···

看出样式什么的，都在设置外部文件的地方。

当我们为一个组件指定样式时，它们的作用域将仅限于该组件。 上面的例子中，这些样式只会作用于AppComponent组件，而不会“泄露”到外部 HTML 中。

5.添加点击事件：
添加点击事件，就是在模板上添加一个click的事件而已，需要修改的只是：

圆括号标识

元素上的click事件是绑定的目标。 等号右边的onSelect(hero)表达式调用AppComponent的onSelect()方法，并把模板输入变量hero作为参数传进去。

那么在AppComponent中添加事件处理函数：

export class AppComponent {
  title = 'hello world';
  heroes = HEROES;
  selectedHero: Hero;//这个是给模板用的，就是html中去绑定而已
  onSelect(hero: Hero): void {//事件处理函数
    this.selectedHero = hero;
  }

6.事件处理完成，但是还没有显示出来，那么需要做的显示。
显示很简单，在模板中添加：

{{selectedHero.name}} details!
  
id: {{selectedHero.id}}
  

    name: 
    
  

这样就可以显示出了。
但是，此时有问题，因为初始化的时候，selectedHero为空，会导致页面出错，啥也不显示。

那么处理这样的情况，就需要如此做了：

 

  
{{selectedHero.name}} details!
  
id: {{selectedHero.id}}
  

    name: 
    
  

这样就会显示正确的页面了。(别忘记是*nglf而不是nglf。)
当没有选中时，ngIf指令会从 DOM 中移除表示详情的这段 HTML 。 没有了表示详情的元素，也就不用担心绑定问题。

当用户选取了一个，selectedHero变成了“已定义的”值，于是ngIf把详情加回 DOM 中，并计算它所嵌套的各种绑定。

7.在继续美化下界面，目前可以选择了，并且显示了，但是到底是哪个选择上，无法在列表中看出来，那么我们需要如此做：

在列表的li中添加[class.selected]="hero === selectedHero"，这句话的意思是：如果此时hero与选择上的selectedHero完全相等的话，那么此时让li添加上selected名称的class的修饰。
当表达式(hero === selectedHero)为true时，Angular会添加一个CSS类selected。为false时则会移除selected类。