版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/71273714
本章节主要介绍
- 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
