ionic入門之資料綁定顯示-2

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/inforstack/article/details/71273714

本章節主要介紹 

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;
    }
  }
}
           

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