本章节主要介绍
ngFor ngIf 表达式 事件绑定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; } } } action.ts 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; } } view
