//angular2 如何在组件component里创建类，如何把类赋值个输出变量，如何绑定数据到模板？
//-----app.components.ts 文件-----

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    // templateUrl: './app.component.html',
    template: `{{title}}{{hero.name}} details!`,
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'Tour of Heroes';
    // <-- 小官提示：在这里使用Hero类创建一个英雄；
    hero : Hero = {
        id: 1,
        name: 'Windstorm'
    }
}

//创建一个英雄类
export class Hero{
    id: number;
    name: string;
}

// <-- 利用Hero类定义一个班的英雄,注意层级跟Hero类同级
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' }
];

理解Angular2 的双向绑定：

在上面代码的基础上，把template的模板内容替换为下面即可：

template: `
  <h2>{{hero.name}} details!</h2>
  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
  </div>
  `,

如何实现模板里对多条数据的遍历和绑定？

  // 模板里的写法
  <ul class="heroes">
    <li *ngFor="let hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>