ionic入门之数据绑定显示-2

本章节主要介绍 

1. ngFor 
2. ngIf 
3. 表达式 
4. 事件绑定

action.html

<ion-content padding>
  <h2>My Heroes</h2>
  <ul class="heroes">
    <!--引号中赋值给ngFor的那段文本表示“从heroes数组中取出每个hero，存入一个局部的hero变量，并让它在相应的模板实例中可用”。-->
    <!--当表达式(hero === selectedHero)为true时，Angular会添加一个CSS类selected。为false时则会移除selected类。-->
    <!--(onclick)调用模板的onSelect方法，并且吧hero对象传递过去-->
    <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
<!--判断selectedHero是否为null-->
  <div *ngIf="selectedHero">
    <h2>{{selectedHero.name}} details!</h2>
    <div><label>id: </label>{{selectedHero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </div>
  </div>
</ion-content>

action.scss

page-about {
  .action-action{
    .ion-md-share {
      color : #ED4248;
    }
    .ion-md-arrow-dropright-circle{
      color:#508AE4;
    }
    .ion-md-heart-outline {
      color: #31D55F;
    }
    .action-sheet-cancel ion-icon,
    .action-sheet-destructive ion-icon {
      color: #757575;
    }
  }
}

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

export class Hero {
  id: number;
  name: string;
}
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' }
];

@Component({
  selector: 'page-about',
  templateUrl: 'about1.html'
})

export class AboutPage {

  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;

  constructor(public navCtrl: NavController) {
  }

  onSelect(hero: Hero): void {
    console.log(hero);
    this.selectedHero = hero;
  }

}