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!

    {{selectedHero.id}}

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

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

     

    {{selectedHero.name}} details!

    {{selectedHero.id}}

    这样就会显示正确的页面了。(别忘记是*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类。

  • 你可能感兴趣的:(Angular学习3-数组的绑定,点击显示数组成员)