前面一张我们构建了新的Component，现在我们就开始学习Angular2的新语法，看看如何使用Angular2的新语法和属性。

首先我们mock一个Hero对象的数组。然后我们对这个数组做系列的操作。

import { Hero } from './hero' //如果你想要使用某一个对象。必须提交导入export const HEROES:Hero[] = [  { id: 1, name: 'Bruce' },  { id: 2, name: 'Jason' },  { id: 3, name: 'Jack' },  { id: 4, name: 'Rose' },  { id: 5, name: 'Tornado' },  { id: 6, name: 'Bruce' }]

然后在你需要使用的component 里面导入即可。这样我们就可以使用这个数组了。

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

• *ngFor ，复制宿主元素以及 所有的子元素。（前面的* 是Angular的关键部分，不能忘记。）

　     在Angular1.x 中当我们想要复制宿主元素的时候我们使用的ng-repeat，Angular2中。我们可以在标签上面添加*ngFor 来遍历HEROES。包含name=“for”的元素。已经子元素都将被复制。

     
  
      
           id : {
    {hero.id}} ，    name : {
    {hero.name}}  
      
     

• (click) ，click 事件

     
  
      
        //调用Component中的方法    id : {
    {hero.id}} ，    name : {
    {hero.name}}  
      
     

//Component中对应的click方法。   selectedHero: Hero;  selectHero(hero: Hero): void {    this.selectedHero = hero;  }

• [(ngModule)]，双向绑定属性，上一片我们已经有过接触。属性对应angular1.x中的ng-module。在使用ngModel进行双向绑定的时候，你必须导入FormsModule并吧他添加到Angular 模块的imports列表中。
• *ngIf = "expression"，对应angular1.x中的ng-if，具体用法如下，当expression=true的时候会显示元素和子元素，当expression=false，将不会出现DOM元素。元素在DOM中不站位。

     
         这是ngIf
     

• [class.some-css-class] = "expression"，前面的class是固定写法。some-css-class对应你的css文件中的css class。当expression=true的时候some-css-class将会添加到元素上面，当expression= false，css将不会添加到元素上面。

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

• [style.color] = "expression"，前面的style固定写法。类似上面提到的[class.some-css-class]，这个返回的是单个style的样式。

• [hidden] = "expression"，expression 是引用的Component 中的boolean属性，标识是否隐藏DOM元素。

changed

• [disabled] = "expression"，从DOM的方面来看。如果button设置了disableed无论这个值是true还是false这个button任然被禁用。但是通过Angular的disabled属性可以禁用或者启用按钮，我们可以通过设置expression的返回值来禁用或者启用button

Submit

• ngClass = "expression"，Angular可以通过expression的方式来添加不同的cssl给DOM元素

//当isSpecial = true 时。special css将会添加到DOM中 
     

//当isSpecial = true 时。special css将会添加到DOM中 //当isSpecial = false 时。normal css将会添加到DOM中 
     

//也可以通过函数返回不同条件下的css
     
 //Component 中的function currentClasses: {}; setCurrentClasses() { this.currentClasses = { 'saveable': this.canSave, 'modified': !this.isUnchanged, 'special': this.isSpecial }; }

•  [ngStyle] 同时设置多个内联样式

     
        This div is initially italic, normal weight, and extra large (24px).
     
currentStyles: {};setCurrentStyles() {
      this.currentStyles = {    'font-style':  this.canSave      ? 'italic' : 'normal',    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',    'font-size':   this.isSpecial    ? '24px'   : '12px'  };}